QT基本组件

news/发布时间2024/5/14 15:23:19

四、基本组件

  1. Designer 设计师(重点)

Qt包含了一个Designer程序,用于通过可视化界面设计开发界面,保存文件格式为.ui(界面文件)。界面文件内部使用xml语法的标签式语言。

在Qt Creator中创建文件时,选中界面文件选项,可以让自带的窗口类使用界面文件。

所有Desiger中的操作都可以通过C++代码实现。

2、布局Layout(掌握)

可以把布局看作是一个透明的盒子,内部可以放置子组件,这些内部的组件会按照布局预设的规则自动排序。

垂直布局:内部组件竖着排成一列。

水平布局:内部组件横着排成一行。

表格布局:内部组件排布成n*m的表格。

表单布局:用户搭建用户输入的布局效果。

选中布局后,点击可以打破布局。

布局可以贴合窗口。只需要选中窗口对象后,再次点击按钮之一即可。

可以使用伸展组件可以填充空白。

布局可以嵌套,对于外层布局而言,内层布局相当于一个外层布局的子组件。

3、QWidget类(掌握)

QWidget的属性在Designer中显示为淡黄色,

策略:除非必要情况,或实现特殊功能,否则我们的策略进行不要进行修改,因为当前策略对当前控件是最友好的。

4、界面文件与C++代码的关系(熟悉)

5、QLabel标签(掌握)

5.1 基本属性

QLabel用于显示文字或图片,需要注意的是,QLabel不能与用户交互(不能点击),只能展示使用,因此没有合适的信号函数。

QLabel常用属性如下:

我们可以直接对标签进行命名,系统默认的名字就是“标签名称_序号”。例如:

5.2 添加资源库

把图片导入到项目中,成为项目资源,直接使用Qt的虚拟资源路径导入图片,可以在任意环境中使用这些资源图片。

Qt支持以下几种常见的图片格式:

jpg(不包含透明度)、png(包含透明度)、gif(动图)等。

注意导入的图片不能过大(分辨率过高或文件体积过大),因为图片的操作非常消耗资源,图片过大会过度浪费资源。

下面是导入图片成为项目资源的操作步骤:

  1. 在QtCreator中选中项目名称,鼠标右键,点击“添加新文件”。
  2. 在弹出的窗口中,按照下图进行操作

  1. 在弹出的窗口中给资源文件命名。例如res

  1. 在项目管理界面,直接点击“完成”。可以看到在项目中多了个.qrc格式的资源文件

  1. 把命名好的(不包含中文字符)的图片文件放置到项目的工作目录中。

6、选中qrc文件,点击,可以给资源文件新建一个虚拟路径。

7、选中qrc文件,点击,可以导入图片到项目中成为资源。

  1. 导入完成后,可以在qrc文件中看到导入成功的图片。

5.3 使用资源库

1、点击重新构建项目。然后就可以在Designer找到图片资源并使用了。

2、添加图片后,图片比较大,可能会显示不全,需要把scaledContents缩放模式点上。

3、为了测试方便,我们图片最小宽高设置为400、最大宽高也设置成400、此时我们发现,图片变形。

5.4 使用代码添加图片

1、我们也可以通过代码,加载图片,以及修剪图片尺寸。

  1. 如果我们通过代码,加载操作图片,我们需要使用#include<QPixmap>头文件,图片类头文件。
  2. 创建一个图片类对象。

// 图片类构造函数
// 参数1:图片资源路径(qrc文件鼠标右键获取路径)
// 参数2:样板格式,使用默认值即可。
// 参数3:图片颜色格式,使用默认即可。
QPixmap::​QPixmap(const QString & fileName, const char * format = 0, Qt::ImageConversionFlags flags = Qt::AutoColor)

  1. 当前已经创建了图片类的对象,但是还需要缩放,指定图片输出模式。

// 缩放
// 参数1:QSize类型对象,表示目标尺寸,需要添加头文件#include<QSize>
// 参数2:缩放模式,是一个枚举类型,共有三种缩放模式
// 参数3:以速度还是质量优先,两种模式。默认速度优先,也是一个枚举。
// 返回值:转换后的QPixmap对象。
QPixmap QPixmap::​scaled(const QSize & size, Qt::AspectRatioMode aspectRatioMode = Qt::IgnoreAspectRatio, Qt::TransformationMode transformMode = Qt::FastTransformation) const

QSize类

// QSize构造函数
// 宽度以及高度
QSize::​QSize(int width, int height)

需要注意的是,尽量在项目开发之前使用ps等软件预先处理好图片,减少代码运行时的开销,提高代码的运行效率。减少资源占用。

#ifndef DIALOG_H
#define DIALOG_H#include <QDialog>
#include <QPixmap> // 图片类
#include <QSize>namespace Ui {
class Dialog;
}class Dialog : public QDialog
{
    Q_OBJECTpublic:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();private:
    Ui::Dialog *ui;
};#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    // 创建一个图片对象
    // 参数:图片资源路径
    QPixmap pic(":/new/prefix1/g.jpg");    // 定义size对象
    QSize size(ui->label->width(),ui->label->height());    // 缩放
    pic = pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);
    // 使用界面文件中的组件对象
    ui->label->setPixmap(pic);
}Dialog::~Dialog()
{
    delete ui;
}

5.5 使用代码添加动态图

添加动态图:

  1. 需要将我们的动态图,放到项目文件中,并改为.gif
  2. 添加完成后,需要将动态图,加载到项目资源中。

电影类

如果需要播放动态图,需要用到电影类,头文件#include<QMovie>。

// 创建电影类对象,构造函数
/参数1:资源路径
/参数2:输出模式,默认就行
// 参数3:基类指针
QMovie::​QMovie(const QString & fileName, const QByteArray & format = QByteArray(), QObject * parent = 0)

dialog.h

#ifndef DIALOG_H
#define DIALOG_H#include <QDialog>
#include <QPixmap> // 图片类
#include <QSize>
#include <QMovie> // 电影类头文件namespace Ui {
class Dialog;
}class Dialog : public QDialog
{
    Q_OBJECTpublic:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();private:
    Ui::Dialog *ui;
private:
    QMovie *movie;  // 电影类指针
};#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    // 创建一个图片对象
    // 参数:图片资源路径
    QPixmap pic(":/new/prefix1/g.jpg");    // 定义size对象
    QSize size(ui->label->width(),ui->label->height());    // 缩放
    pic = pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);
    // 使用界面文件中的组件对象
    ui->label->setPixmap(pic);    // 创建电影对象
    movie = new QMovie(":/new/prefix1/test.gif");
    // 给QLabel设置电影
    ui->label_2->setMovie(movie);
    // 播放电影
    movie->start();}Dialog::~Dialog()
{
    delete ui;
}

6、QAbstractButton按钮类(掌握)

QAbstractButton是按钮类的基类,因此内部包含了按钮的基础属性和函数。

GroupBox分组盒子组件

QAbstractButton按钮类的常用基本属性

给按钮添加一个图标:

图标文件可以通过下面的网站下载:

iconfont-阿里巴巴矢量图标库

按钮类常用的信号如下:

注意:这个通知信号和别的信号存在区别,只有在状态发生变化时发射。

携带的参数为当前状态。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H#include <QDialog>
#include <QDebug>namespace Ui {
class Dialog;
}class Dialog : public QDialog
{
    Q_OBJECTpublic:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();private:
    Ui::Dialog *ui;private slots:
    void toggledSlot(bool);
};#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    connect(ui->radioButton_8,SIGNAL(toggled(bool)),
            this,SLOT(toggledSlot(bool)));
}Dialog::~Dialog()
{
    delete ui;
}void Dialog::toggledSlot(bool checked)
{
    if(checked)
    {
        qDebug() << "肯德基被选中了" ;
    }
    else
    {
        qDebug() << "不选肯德基" ;
    }
}

QButtonGroup组件

可以使用QButtonGroup组件对多个按钮进行分组,这是一个按钮的逻辑分组,没有任何的UI效果。其主要的目的是用一个信号槽同时监控多个按钮对象的状态。

QButtonGroup继承于QObject并非Qwidget。所以它是不可见的,用户无法从窗口上看到这个控件。

// 构造函数,堆区创建
QButtonGroup::​QButtonGroup(QObject * parent = 0)

给按钮组,添加控件

// 参数1:添加的控件
// 参数2:序号ID
void QButtonGroup::​addButton(QAbstractButton * button, int id = -1)

发送的信号

参数中表示当前触发的按钮本身。

表示当前触发的按钮序号。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H#include <QDialog>
#include <QDebug>
#include <QButtonGroup> // 按钮组namespace Ui {
class Dialog;
}class Dialog : public QDialog
{
    Q_OBJECTpublic:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();private:
    Ui::Dialog *ui;
    QButtonGroup *btp;private slots:
    void buttonToggledSlot(int,bool);
};#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);    btp = new QButtonGroup(this);
    btp->addButton(ui->checkBox,1);
    btp->addButton(ui->checkBox_2,2);
    btp->addButton(ui->checkBox_3,3);    // 注意,我们的按钮控件,是可以多选的。但是按钮组里的控件,默认是互斥的。
    // 所以,我们要解除按钮组的互斥属性。
    btp->setExclusive(false);    connect(btp,SIGNAL(buttonToggled(int,bool)),
            this,SLOT(buttonToggledSlot(int,bool)));
}Dialog::~Dialog()
{
    delete ui;
}void Dialog::buttonToggledSlot(int id, bool checked)
{
    if(id == 1)
    {
        if(checked)
        {
            qDebug() << "PHP被选中了";
        }
        else
        {
            qDebug() << "不选PHP了" ;
        }
    }
    else if(id == 2)
    {
        if(checked)
        {
            qDebug() << "心之钢被选中了";
        }
        else
        {
            qDebug() << "不选心之钢了" ;
        }
    }
    else if(id == 3)
    {
        if(checked)
        {
            qDebug() << "java被选中了";
        }
        else
        {
            qDebug() << "不选java了" ;
        }
    }
    else
    {    }
}

7、QLineEdit单行文本输入框(掌握)

QLineEdit用于输入一个单行文本。常用属性如下。

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);    connect(ui->pushButton,SIGNAL(clicked()),
            this,SLOT(btnClickedSlot()));
}Dialog::~Dialog()
{
    delete ui;
}void Dialog::btnClickedSlot()
{
    QString text = ui->lineEdit->text();
    qDebug() << "第一个QLineEdit内容:" << text;    text = ui->lineEdit_2->text();
    qDebug() << "第二个QLineEdit内容:" << text;}

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);    connect(ui->pushButton,SIGNAL(clicked()),
            this,SLOT(btnClickedSlot()));    connect(ui->lineEdit,SIGNAL(selectionChanged()),
            this,SLOT(selectChangedSlot()));    connect(ui->lineEdit,SIGNAL(textChanged(QString)),
            this,SLOT(textChangedSlot(QString)));
}Dialog::~Dialog()
{
    delete ui;
}void Dialog::btnClickedSlot()
{
    QString text = ui->lineEdit->text();
    qDebug() << "第一个QLineEdit内容:" << text;    text = ui->lineEdit_2->text();
    qDebug() << "第二个QLineEdit内容:" << text;}void Dialog::selectChangedSlot()
{
    qDebug() << ui->lineEdit->selectedText();
    //    qDebug() <<"1111" ;
}void Dialog::textChangedSlot(QString text)
{
    qDebug() << text ;
}

8、ComboBox组合框(熟悉)

comboBox用于选择一个选项。功能类似于QRadioButton。

常用属性如下:

常用信号:

dialog.h

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    connect(ui->comboBox,SIGNAL(editTextChanged(QString)),
            this,SLOT(editTextChangedSlot(QString)));    connect(ui->comboBox,SIGNAL(highlighted(int)),
            this,SLOT(highlightedSlot(int)));
}Dialog::~Dialog()
{
    delete ui;
}void Dialog::editTextChangedSlot(QString text)
{
    qDebug() << text ;
}void Dialog::highlightedSlot(int index)
{
    qDebug() << index;
}

9、若干与数字相关的组件(熟悉)

// value 属性值发生变化时发射的信号
// 参数为当前的value值
void	valueChanged(int value)

dialog.h

#ifndef DIALOG_H
#define DIALOG_H#include <QDialog>
#include <QDebug>namespace Ui {
class Dialog;
}class Dialog : public QDialog
{
    Q_OBJECTpublic:explicit Dialog(QWidget *parent = 0);~Dialog();private:
    Ui::Dialog *ui;
private slots:void setValueSlot(int);
};#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);    connect(ui->dial,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));
    connect(ui->horizontalScrollBar,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));
    connect(ui->horizontalSlider,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));
    connect(ui->progressBar,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));
    connect(ui->spinBox,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));
    connect(ui->verticalScrollBar,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));
    connect(ui->verticalSlider,SIGNAL(valueChanged(int)),
            this,SLOT(setValueSlot(int)));
}Dialog::~Dialog()
{
    delete ui;
}void Dialog::setValueSlot(int value)
{
    ui->dial->setValue(value);
    ui->horizontalScrollBar->setValue(value);
    ui->horizontalSlider->setValue(value);
    ui->progressBar->setValue(value);
    ui->spinBox->setValue(value);
    ui->verticalScrollBar->setValue(value);
    ui->verticalSlider->setValue(value);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.bcls.cn/dxsr/3147.shtml

如若内容造成侵权/违法违规/事实不符,请联系编程老四网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

Leetcode 209.长度最小的子数组

给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&#xff1a; 输入&…

STM32的SDIO

一.SDIO简介 SDIO&#xff0c;全称Secure Digital Input/Output&#xff0c;是一种用于在移动设备和嵌入式系统中实现输入/输出功能的接口标准。它结合了SD卡的存储功能和I/O功能&#xff0c;允许设备通过SD卡槽进行数据输入输出和外围设备连接。 SDIO接口通常被用于连接各种…

华为OD机试真题-CPU算力分配-2023年OD统一考试(C卷)--Python--开源

题目&#xff1a; ** ** 考察内容&#xff1a; 排序(sort)求和&#xff08;sum) 数学转化 循环&#xff08;从小开始&#xff09;break 代码&#xff1a; """ 题目分析&#xff1a; a和b初始总算力不同 从A组中选出的算力尽可能小 交换以后&#xff0c;a和b的…

docker 可视化管理工具 ui-for-docker

1、查询 docker search ui-for-docker 2、拉取镜像 docker pull uifd/ui-for-docker 3、运行启动容器 docker run -it -d \ --name docker-web \ -p 9010:9000 \ --privilegedtrue \ -v /var/run/docker.sock:/var/run/docker.sock \ ui-for-docker 4、页面访问 ​http:/…

C语言-指针初学速成

1.指针是什么 C语言指针是一种特殊的变量&#xff0c;用于存储内存地址。它可以指向其他变量或者其他数据结构&#xff0c;通过指针可以直接访问或修改存储在指定地址的值。指针可以帮助我们在程序中动态地分配和释放内存&#xff0c;以及进行复杂的数据操作。在C语言中&#…

一文读懂Linux内核中的Device mapper映射机制

一、 简介 本文总结Device mapper的映射机制。Device mapper是Linux2.6内核中提供的一种逻辑设备到物理设备的映射框架机制&#xff0c;在该机制下&#xff0c;用户可以很方便的根据自己的需要指定实现存储资源的管理策略&#xff0c;当前比较流行的Linux的逻辑卷管理器比如&a…

在UE5中制作UI环形进度条

在日常开发中&#xff0c;经常会有环形进度条UI的效果&#xff0c;例如技能CD时间、加载动画等&#xff0c;本文将通过材质球节点实现该效果&#xff0c;相较于准备美术素材&#xff0c;这样的做法更为方便&#xff0c;效果如下&#xff1a; 1.制作环状效果材质函数 在内容面…

Sora----打破虚实之间的最后一根枷锁----这扇门的背后是人类文明的晟阳还是最后的余晖

目录 一.Sora出道即巅峰 二.为何说Sora是该领域的巨头 三.Sora无敌的背后究竟有怎样先进的处理技术 1.Spacetime Latent Patches 潜变量时空碎片&#xff0c;建构视觉语言系统 2.扩散模型与Diffusion Transformer&#xff0c;组合成强大的信息提取器 3.DiT应用于潜变量时…

HTTP/1.1 如何优化?

问你一句:「你知道 HTTP/1.1 该如何优化吗?」 我们可以从下面这三种优化思路来优化 HTTP/1.1 协议: 尽量避免发送 HTTP 请求在需要发送 HTTP 请求时&#xff0c;考虑如何减少请求次数减少服务器的 HTTP 响应的数据大小 下面&#xff0c;就针对这三种思路具体看看有哪些优化…

openEuler学习——mysql(第一次总结)

1、openEuler 二进制方式安装MySQL 8.0.x。 思路是先从官网获取安装包链接如下https://mirrors.aliyun.com/mysql/MySQL-8.0/mysql-8.0.28-linux-glibc2.12-x86_64.tar.xz 然后解压安装修改权限&#xff0c;可以参考mysql官方网站步骤 [rootopenEuler-node1 ~]# wget -c https:…

【Python笔记-设计模式】桥接模式

一、说明 桥接模式是一种结构型设计模式&#xff0c; 主要用于将抽象部分与它的实现部分分离&#xff0c; 从而能在开发时分别使用&#xff0c;使系统更加灵活&#xff0c;易于扩展。 (一) 解决问题 所有 组合类的数量将以几何级数增长 抽象和实现分离&#xff1a;桥接模式可…

持续集成,持续交付和持续部署的概念,以及GitLab CI / CD的介绍

引言&#xff1a;上一期我们部署好了gitlab极狐网页版&#xff0c;今天我们介绍一下GitLabCI / CD 目录 一、为什么要 CI / CD 方法 1、持续集成 2、持续交付 3、持续部署 二、GitLab CI / CD简介 三、GitLab CI / CD 的工作原理 4、基本CI / CD工作流程 5、首次设置 …

中科大计网学习记录笔记(十四):多路复用与解复用 | 无连接传输:UDP

前言&#xff1a; 学习视频&#xff1a;中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版&#xff0c;James F.Kurose&#xff0c;Keith W.Ross&#xff09;》课程 该视频是B站非常著名的计网学习视频&#xff0c;但相信很多朋友和我一样在听完前面的部分发现信…

用户空间与内核通信(二)

文章&#xff1a;用户空间与内核通信&#xff08;一&#xff09;介绍了系统调用&#xff08;System Call&#xff09;&#xff0c;内核模块参数和sysfs&#xff0c;sysctl函数方式进行用户空间和内核空间的访问。本章节我将介绍使用netlink套接字和proc文件系统实现用户空间对内…

AI创新之美:AIGC探讨2024年春晚吉祥物龙辰辰的AI绘画之独特观点

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《粉丝福利》 《linux深造日志》 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下…

Apifox接口测试工具详细解析

最近发现一款接口测试工具--apifox&#xff0c;我我们很难将它描述为一款接口管理工具 或 接口自测试工具。 官方给了一个简单的公式&#xff0c;更能说明apifox可以做什么。 Apifox Postman Swagger Mock JMeter Apifox的特点&#xff1a; 接口文档定义&#xff1a; Api…

创建vue工程项目的5种方式

第一种 npm init vuelatest 第二种(和第一种相同) npm create vuelatest 第三种 npm create vitelatest 第四种 vue create 项目名(例:vue-project) 注意&#xff1a;首先需要npm i -g vue/cli, vue-cli3.x的初始化方式&#xff0c;另外&#xff0c;如果创建的是vue…

【Qt学习】QPushButton添加图标 并通过快捷键控制该图标

文章目录 1. 介绍2. 操作3. 相关资源文件 1. 介绍 我们知道&#xff1a;QPushButton表示一个按钮&#xff0c;用于响应用户的点击事件。QPushButton可以显示文本、图标或同时显示两者&#xff0c;也可以设置按钮的样式和状态。 我们利用这点 实现一个简单的功能&#xff1a;用…

微信网页版能够使用(会顶掉微信app的登陆)

一、文件结构 新建目录chrome新建icons&#xff0c;其中图片你自己找吧新建文件manifest.json新建文件wx-rules.json 二、文件内容 对应的png你们自己改下 1、manifest.json {"manifest_version": 3,"name": "wechat-need-web","author…

C#,入门教程(05)——Visual Studio 2022源程序(源代码)自动排版的功能动画图示

上一篇&#xff1a; C#&#xff0c;入门教程(04)——Visual Studio 2022 数据编程实例&#xff1a;随机数与组合https://blog.csdn.net/beijinghorn/article/details/123533838 新来的徒弟们交上来的C#代码&#xff0c;可读性往往很差。 今天一问才知道&#xff0c;他们居然不…
推荐文章