【Qt】QWidget 核⼼属性详解

🍑个人主页：Jupiter. 🚀 所属专栏：QT 欢迎大家点赞收藏评论😊

---

🏝 一.相关概念

Widget（"控件" ） 是 Qt 中的核⼼概念 ，控件是构成⼀个图形化界⾯的基本要素，按钮, 列表视图, 树形视图, 单⾏输⼊框, 多⾏输⼊框, 滚动条, 下拉框等, 都可以称为 “控件”.

QWidget 核⼼属性

在 Qt 中, 使⽤ QWidget 类表⽰ "控件". 像按钮, 视图, 输⼊框, 滚动条等具体的控件类, 都是继承⾃QWidget.可以说, QWidget 中就包含了 Qt 整个控件体系中通⽤的部分.

在 Qt Designer 中, 随便拖⼀个控件过来, 选中该控件, 即可在右下⽅看到 QWidget 中的属性

• 这些属性既可以通过 QtDesigner 会直接修改, 也可以通过代码的⽅式修改.
• 这些属性的具体含义, 在 Qt Assistant 中均有详细介绍.
• 在 Qt Assistant 中搜索 QWidget, 即可找到对应的⽂档说明. (或者在 Qt Creator 代码中, 选中QWidget, 按 F1 也可).

🎨二. 核⼼属性概览

🍄2.1 enabled

API	说明
isEnabled()	获取到控件的可⽤状态.
setEnabled	设置控件是否可使⽤. true 表⽰可⽤, false 表⽰禁⽤.
setDisabled	设置控件是否不可使⽤. true 表⽰不可⽤, false 表⽰可用.

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

---

代码⽰例: 通过按钮2 切换按钮1 的禁⽤状态.

1. 使⽤ Qt Designer 拖两个按钮到 Widget 中

QObject 的 objectName 属性介绍:

• QObject 是 QWidget 的⽗类. ⾥⾯最主要的属性就是 objectName .
• 在⼀个 Qt 程序中, objectName 相当于对象的⾝份标识, 彼此之间不能重复.
• 在使⽤ Qt Designer 时, 尤其是界⾯上存在多个 widget 的时候, 可以通过 objectName 获取到指定的 widget 对象.
• Qt Designer ⽣成的 ui ⽂件, 本⾝是 xml 格式的. qmake 会把这个 xml ⽂件转换成 C++ 的 .h⽂件(这个⽂件⽣成在 build ⽬录中), 构成⼀个 ui_widget 类.
• 每个 widget 的 objectName 最终就会成为 ui_widget 类的属性名字.
• 最终这个类的实例, 就是 Ui::Widget *ui , 因此就可以通过形如 ui->pushButton 或者 ui->pushButton_2 这样的代码获取到界⾯上的 widget 对象了.

⽣成两个按钮的 slot 函数.

• 在 Qt Designer 中创建按钮的时候, 可以设置按钮的初始状态是 “可⽤” 还是 “禁⽤” .
• 如果把 enabled 这⼀列的对钩去掉, 则按钮的初始状态就是 “禁⽤” 状态.

🥭2.2geometry

位置和尺⼨. 其实是四个属性的统称:

• x 横坐标
• y 纵坐标
• width 宽度
• height ⾼度

• 但是实际开发中, 我们并不会直接使⽤这⼏个属性, ⽽是通过⼀系列封装的⽅法来 获取/修改.
• 对于 Qt 的坐标系, 是⼀个 "左⼿坐标系". 其中坐标系的原点是当前元素的⽗元素的左上⻆

API	说明
geometry()	获取到控件的位置和尺⼨. 返回结果是⼀个 QRect, 包含了 x, y, width, height. 其中 x, y 是左上⻆的坐标.
setGeometry(QRect)	获取到控件的位置和尺⼨. 返回结果是⼀个 QRect, 包含了 x, y, width, height. 其中 x, y 是左上⻆的坐标
setGeometry(int x, int y,int width, int height)	设置控件的位置和尺⼨. 可以直接设置⼀个 QRect, 也可以分四个属性单独设置.

代码⽰例: 控制按钮的位置

1. 在界⾯中拖五个按钮.
   五个按钮的 objectName 分别为 pushButton_left , pushButton_right ,pushButton_up, pushButton_down, rightbutton_target

右击转到槽函数，分别实现四个槽函数即可，如下图所示：

代码：

void Widget::on_pushButton_up_clicked()
{//获得pushButton_target的位置与尺寸属性QRect R = this->ui->pushButton_target->geometry();//重新设置this->ui->pushButton_target->setGeometry(R.x(),R.y()-5,R.width(),R.height());
}void Widget::on_pushButton_left_clicked()
{QRect R = this->ui->pushButton_target->geometry();this->ui->pushButton_target->setGeometry(R.x()-5,R.y(),R.width(),R.height());
}void Widget::on_pushButton_down_clicked()
{QRect R = this->ui->pushButton_target->geometry();this->ui->pushButton_target->setGeometry(R.x(),R.y()+5,R.width(),R.height());
}void Widget::on_pushButton_right_clicked()
{QRect R = this->ui->pushButton_target->geometry();this->ui->pushButton_target->setGeometry(R.x()+5,R.y(),R.width(),R.height());
}

window frame 的影响

如果 widget 作为⼀个窗⼝ (带有标题栏, 最⼩化, 最⼤化, 关闭按钮), 那么在计算尺⼨和坐标的 时候就有两种算法. 包含 window frame 和 不包含 window frame. 其中x(), y(), frameGeometry(), pos(), move()都是按照包含 window frame 的⽅式来计算的. 其中 geometry(), width(), height(), rect(), size() 则是按照不包含 window frame 的⽅式来计算的. 当然, 如果⼀个不是作为窗⼝的 widget , 上述两类⽅式得到的结果是⼀致的.

相关 API

API	说明
x()	获取横坐标，计算时包含 window frame
y()	获取纵坐标，计算时包含 window frame
pos()	返回 QPoint 对象, ⾥⾯包含 x(), y(), setX(), setY() 等⽅法，计算时包含 window frame
frameSize()	返回 QSize 对象, ⾥⾯包含 width(), height(), setWidth(), setHeight() 等⽅法，计算时包含 window frame
frameGeometry()	返回 QRect 对象. QRect 相当于 QPoint 和 QSize 的结合体. 可以获取 x, y,width, size， 计算时包含 window frame 对象.
width()	获取宽度，计算时不包含 window frame
height()	获取⾼度，计算时不包含 window frame
size()	返回 QSize 对象, ⾥⾯包含 width(), height(), setWidth(), setHeight() 等⽅法，计算时不包含 window frame
rect()	返回 QRect 对象. QRect 相当于 QPoint 和 QSize 的结合体. 可以获取并设置 x,y, width, size，计算时不包含 window frame 对象.
geometry()	返回 QRect 对象. QRect 相当于 QPoint 和 QSize 的结合体. 可以获取 x, y,width, size，计算时不包含 window frame 对象.
setGeometry()	直接设置窗⼝的位置和尺⼨. 可以设置 x, y, width, height, 或者 QRect 对象，计算时不包含 window frame 对象.
width()	获取宽度，计算时不包含 window frame
height()	获取⾼度，计算时不包含 window frame
size()	返回 QSize 对象, ⾥⾯包含 width(), height(), setWidth(), setHeight() 等⽅法，计算时不包含 window frame
rect()	返回 QRect 对象. QRect 相当于 QPoint 和 QSize 的结合体. 可以获取并设置 x,y, width, size，计算时不包含 window frame 对象.
geometry()	返回 QRect 对象. QRect 相当于 QPoint 和 QSize 的结合体. 可以获取 x, y,width, size，计算时不包含 window frame 对象.
setGeometry()	直接设置窗⼝的位置和尺⼨. 可以设置 x, y, width, height, 或者 QRect 对象，计算时不包含 window frame 对象.

代码⽰例: 感受 geometry 和 frameGeometry 的区别.

1. 在界⾯上放置⼀个按钮.

2. 在按钮的 slot 函数中, 编写代码

运行结果：

---

执⾏程序, 可以看到, 构造函数中, 打印出的 geometry 和 frameGeometry 是相同的.但是在点击按钮时, 打印的 geometry 和 frameGeometry 则存在差异.

🏝 注意!

在构造⽅法中, Widget 刚刚创建出来, 还没有加⼊到对象树中. 此时也就不具备 Windowframe. 在按钮的 slot 函数中, 由于⽤⼾点击的时候, 对象树已经构造好了, 此时 Widget 已经具备了Window frame, 因此在位置和尺⼨上均出现了差异. 如果把上述代码修改成打印 pushButton 的 geometry 和 frameGeometry , 结果就是完全相同的. 因为pushButton 并⾮是⼀个窗⼝。

🌸 2.3 windowTitle

API	说明
windowTitle()	获取到控件的窗⼝标题.
setWindowTitle(constQString& title)	设置控件的窗⼝标

🍰 注意! 上述设置操作针对不同的 widget 可能会有不同的⾏为，如果是顶层 widget (独⽴窗⼝)， 这个操作才会有效，如果是⼦ widget，这个操作⽆任何效果.

示例：

🌴2.4 windowIcon

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

注意：同 windowTitle, 上述操作仅针对顶层 widget 有效.

代码⽰例: 设置窗⼝图标

1）第一种方式：利用绝对路径的方式将电脑上的图片构建一个QIcon对象，设置为WindowIcon。

🎹注意: Windows 下路径的分隔符可以使⽤ / 也可以使⽤ \ . 但是如果在 字符串 中使⽤ \ , 需要写
作转义字符的形式 \ . 因此我们还是更推荐使⽤ /。

• 实际开发中, 我们⼀般不会在代码中通过绝对路径引⼊图⽚. 因为我们⽆法保证程序发布后, ⽤⼾的电脑上也有同样的路径.

• 如果使⽤相对路径, 则需要确保代码中的相对路径写法和图⽚实际所在的路径匹配 (⽐如代码中写作 “./image/rose.jpg”, 就需要在当前⼯作⽬录中创建 image ⽬录, 并把 rose.jpg 放进去).

• 对于 Qt 程序来说, 当前⼯作⽬录可能是变化的. ⽐如通过 Qt Creator 运⾏的程序, 当前⼯作⽬录是项⽬的构建⽬录; 直接双击 exe 运⾏, ⼯作⽬录则是 exe 所在⽬录.

所谓构建⽬录, 是和 Qt 项⽬并列的, 专⻔⽤来放⽣成的临时⽂件和最终 exe 的⽬录.

代码⽰例: 获取当前的⼯作⽬录

• 使⽤QDir::currentPath()即可获取到当前⼯作⽬录

• 直接在 Qt Creator 中执⾏程序, 可以看到当前⼯作⽬录是项⽬的构建⽬录.

• 进⼊上述构建⽬录, 把⾥⾯的 exe 拷⻉到其他⽬录中, ⽐如 D: 中. 再次执⾏程序, 可以看到当前⼯作⽬录已经发⽣改变.

注意, 上述 构建⽬录, 是随时可删除的. ⽐如点击菜单栏中的 “构建” -> “清理项⽬” , 就会把这个⽬录中
的内容清空掉.因此如果我们把图⽚⽂件放到构建⽬录中, 可能在不⼩⼼删除后就丢失了. 我们还是希望能够把图⽚和源代码放到⼀起, 并且使我们的程序⽆论拷⻉到任何位置中都能正确使⽤图⽚.

Qt 使⽤ qrc 机制帮我们⾃动完成了上述⼯作, 更⽅便的来管理项⽬依赖的静态资源.

🎉 qrc ⽂件是⼀种XML格式的资源配置⽂件, 它⽤XML记录硬盘上的⽂件和对应的随意指定的资源名称。
应⽤程序通过资源名称来访问这些资源. 在Qt开发中, 可以通过将资源⽂件添加到项⽬中来⽅便地访问和管理这些资源. 这些资源⽂件可以位于qrc⽂件所在⽬录的同级或其⼦⽬录下. 在构建程序的过程中, Qt 会把资源⽂件的⼆进制数据转成 cpp 代码, 编译到 exe 中. 从⽽使依赖的资源变得 “路径⽆关”. 这种资源管理机制并⾮ Qt 独有, 很多开发框架都有类似的机制. 例如 Android 的 Resources 和 AssetManager 也是类似的效果.

代码⽰例: 通过 qrc 管理图⽚作为图标

1. 右键项⽬, 创建⼀个 Qt Resource File (qrc ⽂件), ⽂件名随意起(不要带中⽂), 此处叫做resource.qrc .

2. 在 qrc 编辑器中, 添加前缀.

此处我们前缀设置成 / 即可，所谓的前缀, 可以理解成 “⽬录” . 这个前缀决定了后续我们如何在代码中访问资源。

3. 在 资源编辑器 中, 点击 add Files 添加资源⽂件

注意: 添加的⽂件必须是在 qrc ⽂件的同级⽬录, 或者同级⽬录的⼦⽬录中. 因此我们需要把使用的文件 复制到上述⽬录中.

添加完毕后, 可以在 资源编辑器 中看到添加好的⽂件

4. 在代码中使，编辑 widget.cpp

注意上述路径的访问规则。

• 使⽤:作为开头, 表⽰从 qrc 中读取资源.
• / 是上⾯配置的前缀
• dog.jpg 是资源的名称

需要确保代码中编写的路径和添加到 qrc 中资源的路径匹配. 否则资源⽆法被访问 (同时也不会有报错提⽰).

接下来, 我们可以进⼊到项⽬的构建⽬录, 可以看到, ⽬录中多了⼀个 qrc_resource.cpp ⽂件. 直接打开这个⽂件, 可以看到类似如下代码:

---

上述代码其实就是通过 unsigned char 数组, 把 dog.jpg 中的每个字节都记录下来. 这些代码会被编译到 exe 中. 后续⽆论 exe 被复制到哪个⽬录下, 都确保能够访问到该图⽚资源.

🌰 上述 qrc 这⼀套资源管理⽅案, 优点和缺点都很明显.

• 优点: 确保了图⽚, 字体, 声⾳等资源能够真正做到 “⽬录⽆关”, ⽆论如何都不会出现资源丢失的情况.
• 缺点: 不适合管理体积⼤的资源. 如果资源⽐较⼤ (⽐如是⼏个 MB 的⽂件), 或者资源特别多,⽣成的最终的 exe 体积就会⽐较⼤, 程序运⾏消耗的内存也会增⼤, 程序编译的时间也会显著增加.

🍃2.5 windowOpacity

API	说明
windowOpacity()	获取到控件的不透明数值. 返回 float, 取值为 0.0 -> 1.0 其中 0.0 表⽰全透明, 1.0 表⽰完全不透明.
setWindowOpacity(float n)	设置控件的不透明数值.

代码⽰例: 调整窗⼝透明度

1. 在界⾯上拖放两个按钮, 分别⽤来增加不透明度和减少不透明度.

objectName 分别为 pushButton_add 和 pushButton_sub

2. 编写 wdiget.cpp, 编写两个按钮的 slot 函数

• 点击 pushButton_sub 会减少不透明度, 也就是窗⼝越来越透明.
• 点击 pushButton_add 会增加不透明度, 窗⼝会逐渐恢复

运行效果：

#### `🌾2.6 cursor`

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

代码⽰例: 在 Qt Designer 中设置按钮的光标

1. 在界⾯中创建⼀个按钮.

2. 直接在右侧属性编辑区修改 cursor 属性为 “等待”

3. 运⾏程序, ⿏标悬停到按钮上, 即可看到光标的变化，截不到，自行验证。

代码⽰例: 通过代码设置按钮的光标

 //获取cursorQCursor cor = ui->pushButton_Add->cursor();//重新设置cursorui->pushButton_Add->setCursor(QCursor(Qt::WaitCursor));

系统内置的光标形状如下: Ctrl + 左键 点击 Qt::WaitCursor 跳转到源码即可看到.

⾃定义⿏标光标

Qt ⾃带的光标形状有限. 我们也可以⾃⼰找个图⽚, 做成⿏标的光标.

1. 创建 qrc 资源⽂件，前面已经有一张dog图片了，这里就不再创建qrc 资源⽂件了

2. 编写 widget.cpp

🌲2.7 font

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

关于 QFont

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

1. 创建一个标签

2. 编写Widget.hpp，更改标签里面的文字属性。

 QFont font;//设置加粗font.setBold(true);//设置字体font.setFamily("黑体");//设置是否斜体font.setItalic(true);//设置字体粗细font.setWeight(100);//设置是否有下划线font.setUnderline(true);//设置字体删除线font.setStrikeOut(true);//设置字体到对象上ui->label->setFont(font);

🍒2.8 toolTip

API	说明
setToolTip	设置 toolTip.⿏标悬停在该 widget 上时会有提⽰说明.
setToolTipDuring	设置 toolTip 提⽰的时间. 单位 ms.时间到后 toolTip ⾃动消失.
toolTip	只是给⽤⼾看的. 在代码中⼀般不需要获取到 toolTip .

示例：

3. 运⾏程序, 观察效果，可以看到⿏标停到按钮上之后, 就能弹出提⽰. 时间到后⾃⾏消失.

🍁 2.9 focusPolicy

设置控件获取到焦点的策略. ⽐如某个控件能否⽤⿏标选中或者能否通过 tab 键选中.
所谓 “焦点” , 指的就是能选中这个元素. 接下来的操作 (⽐如键盘操作), 就都是针对该焦点元素进⾏的
了. 这个对于 输⼊框, 单选框, 复选框等控件⾮常有⽤的.

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 , 同时控件也通过⿏标滚轮获取到焦点 (新增的选项, ⼀般很少使⽤)

代码⽰例: 理解不同的 focusPolicy

1. 在界⾯上创建四个单⾏输⼊框 (Line Edit）

2. 修改四个输⼊框的 focusPolicy 属性为 Qt::StrongFocus (默认取值, ⼀般不⽤额外修改)

此时运⾏程序, 可以看到, 使⽤⿏标单击/tab, 就可以移动光标所在输⼊框. 从⽽接下来的输⼊就是针对
这个获取焦点的输⼊框展开的了

3. 修改第⼆个输⼊框的 focusPolicy 为 Qt::NoFocus , 则第⼆个输⼊框不会被 tab / ⿏标左键选中。此时这个输⼊框也就⽆法输⼊内容了.

4. 修改第三个输⼊框 focusPolicy 为 Qt::TabFocus , 则只能通过 tab 选中, ⽆法通过⿏标选中.
5. 修改第四个输⼊框 focusPolicy 为 Qt::ClickFocus , 则只能通过 tab 选中, ⽆法通过⿏标选中.

🍇2.10 styleSheet

CSS (Cascading Style Sheets 层叠样式表) 本⾝属于⽹⻚前端技术. 主要就是⽤来描述界⾯的样式.
所谓 “样式”, 包括不限于 ⼤⼩, 位置, 颜⾊, 间距, 字体, 背景, 边框等.
我们平时看到的丰富多彩的⽹⻚, 就都会⽤到⼤量的 CSS.
Qt 虽然是做 GUI 开发, 但实际上和 ⽹⻚前端 有很多异曲同⼯之处. 因此 Qt 也引⼊了对于 CSS的⽀持.

• CSS 中可以设置的样式属性⾮常多. 基于这些属性 Qt 只能⽀持其中⼀部分, 称为 QSS (Qt Style Sheet)

代码⽰例: 设置⽂本样式

1. 在界⾯上创建 label

2. 编辑右侧的 styleSheet 属性, 设置样式

• 此处的语法格式同 CSS, 使⽤键值对的⽅式设置样式. 其中键和值之间使⽤ : 分割. 键值对之间使⽤ ; 分割.
• 另外, Qt Designer 只能对样式的基本格式进⾏校验, 不能检测出哪些样式不被 Qt ⽀持. ⽐如 text-align: center 这样的⽂本居中操作, 就⽆法⽀持.

编辑完成样式之后, 可以看到在 Qt Designer 中能够实时预览出效果.

代码⽰例: 实现切换夜间模式.

1. 在界⾯上创建⼀个多⾏输⼊框 (Text Edit) 和两个按钮.
   objectName 分别为 pushButton_light 和 pushButton_dark

2. 编写按钮的 slot 函数

void Widget::on_pushButton_light_clicked()
{this->setStyleSheet("background-color: #333");ui->label->setStyleSheet("background-color: #333; color: #fff;");ui->pushButton_light->setStyleSheet("color: #fff");ui->pushButton_dark->setStyleSheet("color: #fff");
}void Widget::on_pushButton_dark_clicked()
{this->setStyleSheet("background-color: #f3f3f3");ui->label->setStyleSheet("background-color: #fff; color: #000;");ui->pushButton_light->setStyleSheet("color: #000");ui->pushButton_dark->setStyleSheet("color: #000");
}

🎁 关于计算机中的颜⾊表⽰

计算机中使⽤ “像素” 表⽰屏幕上的⼀个基本单位(也就是⼀个发亮的光点). 每个光点都使⽤三个字节表⽰颜⾊, 分别是 R (red), G (green), B (blue) ⼀个字节表⽰ (取值范 围是 0-255, 或者 0x00-0xFF). 混合三种不同颜⾊的数值⽐例,就能搭配出千千万万的颜⾊出来.
rgb(255, 0, 0) 或者 #FF0000 或者 #F00 表⽰纯红⾊.
rgb(0,255, 0) 或者 #00FF00 或者 #0F0 表⽰纯绿⾊.
rgb(0, 0, 255) 或者 #0000FF 或者 #00F 表⽰纯蓝⾊.
rgb(255, 255, 255) 或者 #FFFFFF 或者 #FFF 表⽰纯⽩⾊.
rgb(0, 0, 0)或者 #000000 或者 #000 表⽰纯⿊⾊.
当然, 上述规则只是针对⼀般的程序⽽⾔是这么设定的. 实际的显⽰器, 可能有 8bit ⾊深或者 10bit ⾊深等, 实际情况会更加复杂.

3. 运⾏程序, 点击 “⽇间模式”, 就是浅⾊背景, 深⾊⽂字; 点击 “夜间模式”, 就是深⾊背景, 浅⾊⽂字.

---