当前位置：首页 > news >正文

【Qt】控件的理解和基础控件 QWidget 属性详解（通俗易懂+附源码+思维导图框架）

news 来源：原创 2025/7/21 15:46:53

每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry”

绪论：
通过上一章对信号槽的理解相信你对Qt的认识肯定有了很大的进步，下面将通过本篇文章带你深入的认识Widget控件（主窗口），他是很多其他控件的父类，它的很多属性都能运用到其他属性中，所以下面将带你认识Widget的常见的属性并附有大量的练习，包括但不限于Widget 窗口的透明度、控件的能否使用、窗口标题的设置、认识qrc加载图片机制等12个属性。之后将持续更新中常用信号。
————————
早关注不迷路，话不多说安全带系好，发车啦（建议电脑观看）。

控件 Widget

控价通俗来说界面上的各种元素的统称，其中 Qt Designer 中左侧一长条就是Qt内置好的控件，能直接拖拽使用
在这里插入图片描述

之前开发GUI没啥控件概念，界面上显示出来的东西，其实都是画出来的，显示器可以理解成画布

开发一个图形化界面的程序，就相当于先画出一个窗口（矩形，如下图）
后来控件的概念就被引入，如HTML中的标签（原始的控件：<img>、<a>、…）
新的GUI开发体系越来越丰富，控件数量/质量越来越提升了
Qt 的控件虽然很多，但整体来说，颜值还是比更现代的控件体系要逊色一筹
不过近几年Qt Designer Studio 对标现代的界面体系（制作出来界面的美化程度就是业界领先的一档~）

QWidget类

在Qt Creator 右侧，可以看到QWidget的各种属性并且进行编辑
在这里插入图片描述

上述属性都可以通过Qt的文档来一一进行了解
在这里插入图片描述
其中知道的是：会有很多控件都会继承于QWidget，该控件就能使用父类QWidget中的属性，这样通过了解QWidget中的属性就也能控制器子类控件，所以我们了解QWidget是非常有必要的。

1. enabled 控件是否可用

作用：描述一个控件是否处于 “可用” 状态，反之就是禁用状态

所谓 “禁⽤” 指的是该控件不能接收任何⽤⼾的输⼊事件, 并且外观上往往是灰⾊的.
如果⼀个 widget 被禁⽤, 则该 widget 的⼦元素也被禁⽤

方法：

isEnabled：获取到控件的可⽤状态
setEnabled：设置控件是否可使⽤. true 表⽰可⽤, false 表⽰禁⽤

实操：

将一个按钮控件 “禁用”
通过拖拽快速生成两个按钮控件，他们都是继承于QWidget的，所以将属性设置为enabled时就会无法使用：
在这里插入图片描述
发现就变白了

创建两个按钮，通过一个按钮去禁用另外一个按钮
拖拽两按钮，对其中一个按钮设置信号槽，当点击该按钮时设置另外一个按钮的enabled状态
注意点：

1.1 objectName 控件名称

objectName 该属性是要保证唯一的，它本质就是一个控件的唯一id

当自动生成的objectName有点规律：控件的类型 + 下划线 + 数字
但带有数字的命名方式是一个不太好的习惯，所以一般建议再自行修改下，让他有点含义

然后对这两个按钮添加槽函数（右击选择转到槽即可）
其中对于点击选择信号：clicked 来说他有两个版本

一个是无参的（没什么好说的）
一个是 bool 参数，他是代表着checked当前是否被勾选（类似一种选项框，对于pushbutton是没有意义的）

源码：
在这里插入图片描述

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);
}Widget::~Widget()
{delete ui;
}//使用clicked信号设置槽函数
void Widget::on_pushButton_clicked()
{//当点击按钮时，触发该信号槽if( ui->pushButton_2->isEnabled())//当为使用状态时改成禁用{ui->pushButton_2->setEnabled(false);}else{//反之ui->pushButton_2->setEnabled(true);}
}

2. geometry 坐标系

geometry（英文就是几何）
可以把它理解成4个属性的统称或者是一个结构体（QRect类）内部是有 x、y、width、height 四个属性，通过这四个属性就能知道或者设置该控件的位置和大小（如下图）

在这里插入图片描述

常用方法：

获取位置和尺寸：geometry()
1. 返回结果是⼀个 QRect（矩阵）,
2. 该对象包含了 x, y, width, height 其中 x, y 是左上⻆的坐标
3. 再通过 对象.x()、对象.y() ... 的形式获取具体的值
设置控件位置
1. 设置控件的位置和尺⼨可以直接设置⼀个 QRect：
  setGeometry(QRect)
2. 也可以分四个属性单独设置：
  setGeometry(int x, int y, int width, int height)

理解xy坐标（如下图）：
在这里插入图片描述

实操：实现（上下左右）方向键控制移动

实现原理：

通过信号槽 + gemotry 方法实现按钮移动
通过点击几个按钮，修改target按钮的geometry（几何）

首先创建五个按钮（并注意修改objectName）：

生成下面四个按钮的槽函数

QDebug能打印许多Qt中的新类
打印结果如下：

完善好这4个按钮的槽函数：

但注意的是：
当前代码执行的效果仅仅是修改了调整左上角的位置，此时因为左上角位置改变同时高度和宽度也会同时发送改变（如上图会出现该控件不断的拉伸的情况）

源码：
向上的槽函数：
void Widget::on_pushButton_up_clicked()
{QRect rect = ui->pushButton_vessel->geometry();qDebug() << rect.y();rect.setY(rect.y() - 5);//此处是让y值-5，因为是位置的改变，会导致其他值也发送生改变ui->pushButton_vessel->setGeometry(rect);
}

让按钮进行平移（移动）

若想真正的实现平移
也就是不能使用单参数的setGeometry，而是使用setGeometry的另外一个重载进行位置的修改，同时在改变某个值的同时保证另外几个值不变（setGeometry(int x, int y, int width, int height) ）

槽函数源码如下：

void Widget::on_pushButton_up_clicked()
{QRect rect = ui->pushButton_vessel->geometry();qDebug() << rect.y();ui->pushButton_vessel->setGeometry(rect.x(),rect.y() - 5,rect.width(),rect.height());
}void Widget::on_pushButton_left_clicked()
{QRect rect = ui->pushButton_vessel->geometry();qDebug() << rect.x();ui->pushButton_vessel->setGeometry(rect.x() - 5,rect.y(),rect.width(),rect.height());
}void Widget::on_pushButton_down_clicked()
{QRect rect = ui->pushButton_vessel->geometry();qDebug() << rect.y();ui->pushButton_vessel->setGeometry(rect.x(),rect.y() + 5,rect.width(),rect.height());
}void Widget::on_pushButton_right_clicked()
{QRect rect = ui->pushButton_vessel->geometry();qDebug() << rect.y();ui->pushButton_vessel->setGeometry(rect.x()+ 5,rect.y(),rect.width(),rect.height());
}

3. Window Frame 的影响

Windows frame 窗口框架（操作系统自带的），如果 widget 作为⼀个窗⼝ (带有标题栏, 最⼩化, 最⼤化, 关闭按钮), 那么在计算尺⼨和坐标的时候就有两种算法：

包含 window frame
不包含 window frame.

可以理解成游戏的全屏和非全屏模式，或者是否带有标题栏
在这里插入图片描述
在Qt中，关于位置尺寸，提供了许多API，即可以以Widget本题左上角原地的（不包含Windowsframe），也可以以 window frame左上角为原点

实操：geometry 和 frameGeometry 两种方法来移动位置

在这里插入图片描述

当代码在构造函数中时，widget对象正在构造，还没有被加入到window frame中
因此若在构造函数中查看他们的位置就看不到，就需要通过一些控件，并在槽函数中打印查看

在这里插入图片描述

window frame 就可以看成最顶上的那一条

4. windTitle 窗口标题

当前 windowTitle 属性，是从属于 QWidget

获取到控件的窗⼝标题：windowTitle()
设置控件的窗⼝标题：setWindowTitle(const QString& title)

windowTitle属性的设置只针对顶层窗口这样的QWidget才有效
当前不应该给按钮设置windowTiltle，但是实际设计好了之后没生效，也没报错（这是不太科学的）
这一点，更希望代码写出不科学时，能够给一些报错提示

5. windowIcon 设置窗口的图标

windowIcon 的默认图标（发现比较丑，一般情况下也是需要自己设定的）：
在这里插入图片描述

获取到控件的窗⼝图标：windowIcon() 返回 QIcon 对象
设置控件的窗⼝图标. ：setWindowIcon(const QIcon& icon)

这个api类似 windowTitle 也是只能针对顶层窗口使用

先准备一个图片
创建一个QIcon对象，其中在栈上创建对象（对于QIcon是一个比较小的对象，目的就是为了设置某个 QWidget 对象中的图片，QIcon对象释不释放都不影响）
构造时，添加路径
1. 路径不要带中文
2. 路径中使用 \\ 作为路径分隔符，因为C语言中 \ 是转义字符
3. 但更推荐使用 / 来代替（或者使用 C++11 中的字符串原始字面量 r ("....") ）
4. 其中注意的是，使用绝对路径引入图片是不科学的，因为你无法确保开发机上图片的路径和用户电脑上图片的路径完全一致，所以尽量使用相对路径

C++11 R保持原始字符串：
在这里插入图片描述
通过 \\ 将 \ 表示为不使用转义字符

使用 / 代替 \:

但相对路径也有一定的缺陷就是，用户仍然可能就将图片文件删除或更改，所以引入qrc机制：

6. qrc 机制：

这个机制就是从根本上解决上述两个问题

确保你的图片在路径目标用户机上存在
确保你的图片不会被用户搞没了

给 Qt 项目引入一个额外xml文件（后缀名使用 .qrc 表示）
在这个 xml 中把要使用的图片资源给导入进来，并且在xml中进行记录
Qt 在编译项目的时候，就会根据 qrc 中描述的图片信息，找到图片内容，提取图片的二进制数据，把这些二进制数据转换成 C++ 代码，最终编译到exe里！
但缺点也很明显，无法导入太大的资源文件

qrc 添加图片机制流程：

创建 qrc文件
把图片导入qrc文件中
将要加载的图片存放到项目目录下：
1. 先创建一个前缀（Prefix）：虚拟目录（这个目录并不在电脑真实存在，是在Qt中抽象出来的），为了方便Qt代码中访问到这个图片。
2. 然后把使用的图片给导入资源文件中（点击Add Files选择图片），导入图片需要确保图片在 resource.qrc 同级目录下/同级目录的子目录里（需要拷贝进来）
3. 再次通过QIcon对象获取该路径即可，此时需要访问的就是qrc中管理的文件路径，并且注意需要在路径上带有 : 前缀
4. 运行后就会自动生成 qrc_resource.cpp （resource是自己取的qrc文件名称），也就是会将图片的每个字节存储起来，当Qt项目进行编译的时候，这个cpp文件机会被编译到一个exe文件中，所以上述图片的数据也就被加载到内存中了

7. windowOpacity 半透明效果

例如毛玻璃效果（基于半透明在做一些处理）

获取到控件的不透明数值：windowOpacity()
1. 返回 float,
2. 取值为 0.0 -> 1.0 其中 0.0 表⽰全透明, 1.0 表⽰完全不透明
3. 注意的是：数值越大越不透明~
设置控件的不透明数值：setWindowOpacity(float n)

实操：设置窗口的透明度

在这里插入图片描述

通过两个按钮（+、-）的槽函数设置透明度

拖拽上两个按钮，修改ObjectName Add Sub
给两个按钮添加槽函数，内部修改整个窗口的透明度
1. 通过windowOpacoity获取主窗口的opacity对象，调整opacity对象的透明度值（+= 0.1 / -= 0.1）
2. 打印情况opacity的值
3. 给主窗口设置透明度，通过this指针调用seyWindowOpacity

void Widget::on_pushButton_plus_clicked()
{float opacity = this->windowOpacity();this->setWindowOpacity(opacity + 0.1);
}void Widget::on_pushButton_sub_clicked()
{float opacity = this->windowOpacity();this->setWindowOpacity(opacity - 0.1);
}

当我们查看 opacity 的值时不难发现，变化是不精准的：
在这里插入图片描述
其中发现窗口的不透明度，变化并非精确的（因为IEEE 754标准规定浮点数要使用二进制科学计数法的方式来表示）
原因也很简单：
也是c/c++中float和double 类型的缺陷，因为它们的有效数部分长度是有效的，所以无法凑出一个非常接近0.1这样的数（但优点：运算速度快，占用空间小）

所以说不能把两个浮点数直接比较！！
那么解决办法是通过作差的方法，判断绝对值，看他是否小于预期误差范围~

防御性编程：
透明度值只能在 0 ~ 1.0 区间，当超过 0 ~ 1.0 的值都无法设置进去
1. 虽然不判定条件也ok，但还是建议加上

8. cursor 光标的设置

API	说明
`cursor()`	获取到当前 widget 的 cursor 属性, 返回 QCursor 对象. 当⿏标悬停在该 widget 上时, 就会显⽰出对应的形状.
`setCursor(const QCursor& cursor)`	设置该 widget 光标的形状. 仅在⿏标停留在该 widget 上时⽣效.
`QGuiApplication::setOverrideCursor(const QCursor& cursor)`	设置全局光标的形状. 对整个程序中的所有 widget 都会⽣效. 覆盖上⾯的 setCursor 设置的内容.

其中细节：

前两个cursor和setCursor的范围是同一个界面中，设置指定的光标
而 QGuiApplication::setOverrideCurSor：设置全局的光标

实操：修改光标的图标 QPixmap

当拖拽一个控件后可以直接在右侧属性中进行快速的修改cursor的样式：

在这里插入图片描述

当然也可通过代码的形式进行修改：

创建cursor对象，通过构造初始化进行设置光标
构造函数中修改，对ui中的按钮进行调用设置cursor的函数，传递cursor对象即可

在这里插入图片描述

不难发现：Qt中内置的光标形式有许多（如下图），但都比较的老套了

Qt允许通过自定义的图片来设置光标：

先准备一个图片，把图片导入到项目中，在代码中访问图片，基于这个图片构造出光标对象并设置到cursor中

通过qrc导入图片
QPixmap：这个对象来表示一个图片，建议直接在栈上定义，构造传入刚刚创建的图片路径
构造一个光标对象，并构造传递QPixmap图片对象
默认点击的是图片的左上角（鼠标的位置）。但可以继续在构造中传递坐标，确定鼠标点击的位置（以左上角为原点的坐标位置），也就是设置光标热点所在的位置（也就是cursor参数中Pixmap后面的两个参数）
在把光标设置进去，this指针调用setCursor传递刚刚创建的Cursor对象即可

如我们选择的图片可能比较的大，

pixmap中的scaled函数进行重新设置图片大小进行缩放
注意缩放并不是修改图片对象，而是返回一个新的图片的对象副本

推荐一个矢量图库：阿里巴巴矢量图标库（免费下载）

源码：

#include "widget.h"
#include "ui_widget.h"#include <QCursor>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPixmap pixmap(":/loading.png");//使用QPixmap存储创建的图片pixmap = pixmap.scaled(20,20);//scaled缩放，注意是返回而不是直接覆盖QCursor cursor(pixmap,10,10);//将图片给到QCursorui->pushButton->setCursor(cursor);}Widget::~Widget()
{delete ui;
}

最终使用scaled进行缩放的效果：
请添加图片描述

9. Front

API	说明
font()	获取当前 widget 的字体信息. 返回 QFont 对象.
setFont(const QFont& font)	设置当前 widget 的字体信息

关于QFont
也就是一些字体的属性（都很好理解也是最常用的）：

属性	说明
family	字体家族⽐如 “楷体”, “宋体”, “微软雅⿊” 等
pointSize	字体⼤⼩ px
weight	字体粗细以数值⽅式表⽰粗细程度取值范围为 [0, 99], 数值越⼤, 越粗.
bold	是否加粗. 设置为 true, 相当于 weight 为 75. 设置为 false 相当于 weight 为 50
italic	是否倾斜
underline	是否带有下划线
strikeOut	是否带有删除线

（上述属性具体怎么设计往往后美工/设计/UED来确定，若没有作为程序员我们就能参考下别人数如何安排的）

下面将通过代码的形式进行展示，查看具体的使用

通过ui拖拽一个label标签进去
font属性内部就能进行修改
其中的属性：
1. 字体族：字体的类型
2. 点大小：字体的大小
3. 以及较好理解的概念：粗体、下划线、删除线、字距调整、反锯齿

但通过这种编辑器的修改，总归对于程序来说是不够遍历的，所以我们得通过代码的形式来写，这里就略过了较为简单（具体某个属性通过前置set进行设置即可）

10. toolTip 弹出提示（解释控件的作用）

API	说明
setToolTip	设置 toolTip。⿏标悬停在该 widget 上时会有提⽰说明（也就是提示的内容）
setToolTipDuring	设置 toolTip 提⽰的时间. 单位 ms 时间到后 toolTip ⾃动消失（提示的时间）

代码实操

拖拽两个按钮在界面中
在通过代码设置弹出提示（setToolTip）
设置说明：
1. “这是一个yes按钮”、时间：msec毫秒 3000ms（1s = 1000ms）
2. “这是一个no按钮”、1000ms

代码实现：

 ui->pushButton_3->setToolTip("代码实现的提示");ui->pushButton_3->setToolTipDuration(5000);

在这里插入图片描述

附：若某种特性需要程序已启动就显示的就可以设置在构造函数中

11. focusPolicy 控件焦点

focusPolicy设置控件获取到焦点的策略

⽐如：

某个控件能否⽤⿏标选中或者能否通过 tab 键选中
再如：
界面上有一个输入框，此时必须选中这个输入框，接下来键盘才能将输入进去，这种选中的过程就是焦点
实际常见中：
如笔试过程中，遇到不会的题，能不能切到百度来搜一下？此时的处理方法就是窗口焦点，你在网页中去做题，网页是始终获取到焦点的状态，一旦你切到百度/其他程序，立即就知道失去了焦点的也就代表有作弊可能了~

所以 GUI中窗口/控件焦点是非常关键的~~

具体方法：

API	说明
focusPolicy()	获取该 widget 的 focusPolicy, 返回 Qt::FocusPolicy
setFocusPolicy(Qt::FocusPolicy policy)	设置 widget 的 focusPolicy

其中的参数 Qt::FocusPolicy 类型，本质是枚举类型：

Qt::NoFocus ：控件不会接收键盘焦点（此时就不能被选中的意思）
Qt::TabFocus ：控件只可以通过Tab键接收焦点
Qt::ClickFocus ：控件只可以在⿏标点击时接收焦点
Qt::StrongFocus ：==控件可以通过Tab键和⿏标点击接收焦点 (默认值) ==
Qt::WheelFocus : 类似于 Qt::StrongFocus , 同时控件也通过⿏标滚轮获取到焦点 (新增的选项, ⼀般很少使⽤)。

代码实操：

拖拽几个lineEdit输入框，进行查看：默认是点击 + Tab 键接收焦点的
当把一个输入框设置为NoFocus就无法被选中
当把一个输入框设置为TabFocus此时就无法被鼠标点击选中，但可以通过Tab切换到
同理设置为ClickFocus时就不能tab到了
挺简单的自行测试哈，不好展示~

12. styleSheet Widget样式

styleSheet 类似CSS设置网页样式一样，styleSheet是设置窗口的样式

样式：描述界面具体是什么样子的~

CSS层叠样式表，在进行网页开发的时候提供方法的功能将网页设置非常好看，而Qt 就把 CSS 参考过来了，搞了一个套 QSS（样式表）

通过代码学习：

创建一个label控件，在右边属性中就会有styleSheed属性
双击后再内部通过键值对的格式进行设置样式
如：font-family:‘微软雅黑’、font-size:30px
1. 其中和 CSS类似，是通过键值对的格式进行添加样式
2. 也就是：键：值
3. 键值对和键值对之间通过 ; 分割

修改后状态：
在这里插入图片描述

实例：实现夜间模式

在这里插入图片描述

通过代码来设置样式，实现夜间模式

打开ui拖拽一个Plain Text Edit上去
在添加两个按钮并命名为“日间模式”、“夜间模式”，设置其信号槽
对于light（日间模式）来说：
1. 将窗口和输入框调用 setStyleSheet 进行设置样式
2. 内容：background-color：white;
3. 也就是设置背景色为白色（调成了日间模式）
4. 其中对于输入框来说还要添加color:black设置字体为黑色
5. 设置按钮样式，将他们设置为黑色 color : black（因为要看到见）
对于dark夜间模式
1. 如法炮制
2. 设置窗口和输入框的样式：黑色背景、白色字体
3. 按钮样式为白色（为了在夜间能看到）
注意点：千万要注意单词的拼写！（不会出错，但样式不会生效）
对于;来说可加可不加

槽函数的实现


void Widget::on_pushButton_3_clicked()//不好的命名规范~
{//点击日间模式this->setStyleSheet("background-color:  RGB(240,240,240)");ui->lineEdit->setStyleSheet("color: black");ui->pushButton_3->setStyleSheet("color: black");ui->pushButton_4->setStyleSheet("color: black");
}void Widget::on_pushButton_4_clicked()
{//点击夜间模式this->setStyleSheet("background-color: black");ui->lineEdit->setStyleSheet("color: white");ui->pushButton_3->setStyleSheet("color: white");ui->pushButton_4->setStyleSheet("color: white");
}

在这里插入图片描述

其中若直接变化则会出现问题：
日间模式的窗口背景颜色和默认的窗口背景颜色不一样了，主要是因为颜色的不一样，那么应该怎么解决呢？具体让我们进行往下看…

计算机中颜色是如何表示的RGB

CSS/QSS中是直接使用单词来设置颜色的，white、black、red、green
那么颜色有多少种呢？无数种~

而在计算机中，使用RGB的方式来表示颜色

RGB就是三原色（光的三原色），通过这三种颜色进行不同比例的混合就能构成不同的颜色

R：red
G：green
B：blue

屏幕上的像素就是一个包含RGB的小灯泡
计算机中通常使用一个字节表示R、G、B。也就是每个颜色的值都是： 0 ~ 255

例如：

假设R这个分量为 255 ，这表示红色的比例拉满
再如：RGB（255,0,255）：红色拉满，绿色没有、蓝色拉满

还能使用十六进制表示：

#FF00FF：其实和上面是一样的因为 FF 就对应着上面的红色（因为1个十六进制代表4个二进制，此时2个十六进制就是8个二进制，也就是8位，也就是 0 ~ 255 所以最开始的前两个十六进制就代表着红色，其余的就是绿色和蓝色）
所以同样表示：红色拉满，绿色没有、蓝色拉满

那么回到前面的问题，Widget的初始化背景色是多少数值呢？

通过ps的取色器，但没必要使用ps
咋们可以直接使用qq中的截屏快速的来查看：

通过qq截屏读取RGB颜色就知道了，初始背景的RGB(240,240,240)

所以对于日间模式的窗口的颜色设置就改成 rgb(240,240,240)，这样就能保证颜色一致~

Widget中还有许多属性，这里就不过诉了，可以自行调阅文档了解哈~

本章完。预知后事如何，暂听下回分解。

如果有任何问题欢迎讨论哈！

如果觉得这篇文章对你有所帮助的话点点赞吧！

持续更新大量Qt细致内容，早关注不迷路。

控件 Widget

QWidget类

1. enabled 控件是否可用

实操：

1.1 objectName 控件名称

2. geometry 坐标系

实操： 实现（上下左右）方向键 控制移动

3. Window Frame 的影响

实操：geometry 和 frameGeometry 两种方法来移动位置

4. windTitle 窗口标题

5. windowIcon 设置窗口的图标

6. qrc 机制：

qrc 添加图片机制流程：

7. windowOpacity 半透明效果

实操：设置窗口的透明度

8. cursor 光标的设置

实操：修改光标的图标 QPixmap

源码：

9. Front

10. toolTip 弹出提示（解释控件的作用）

代码实操

11. focusPolicy 控件焦点

12. styleSheet Widget样式

实例：实现夜间模式

计算机中颜色是如何表示的RGB

相关文章：

实操：实现（上下左右）方向键控制移动