目录

（一）控件概述

1.1 关于控件体系的发展

（二）QWidget 核心属性

2.1 核心属性概览

2.2 enabled

2.3 geometry

2.4 windowTitle

2.5 windowIcon 

2.6 windowOpacity

2.7 cursor

2.8 font  

2.9 toolTip  

 2.10 focusPolicy  

2.11 styleSheet

（三）小结

（一）控件概述

🏕 综上, 学习Qt, 其中⼀个很重要的任务就是熟悉并掌握 Qt 内置的常⽤控件. 这些控件对于我们快速开发出符合需求的界⾯, 是⾄关重要的.

1.1 关于控件体系的发展

控件是 GUI 开发中的通⽤概念. 不仅仅局限在 Qt 中.

第⼆阶段:

• 只包含粗略的控件. 只是提供了按钮, 输⼊框, 单选框, 复选框等最常⽤的控件.
• 例如 html 的原⽣控件.

• 更完整的控件体系, 基本可以覆盖到 GUI 开发中的⼤部分场景.
• 例如早期的 MFC, VB, C++ Builder, Qt, Delphi, 后来的 Android SDK, Java FX, 前端的各种 UI 库等.

• 上图是前端中的Element-ui 中的控件概览, ⽆论是丰富程度还是颜值, 都⽐ Qt ⾃带的控件更胜⼀筹.

2.2 enabled

 【解释说明】

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

代码示例: 使⽤代码创建⼀个禁⽤状态的按钮

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* btn = new QPushButton(this);
    btn->setText("这是个被禁⽤的按钮");
    btn->setEnabled(false);
}

运⾏程序, 可以看到按钮处于灰⾊状态, ⽆法被点击.  

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

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

【解释说明】 

两个按钮的 objectName 分别为 pushButton 和 pushButton_2；

QObject 的 objectName 属性介绍:

1. QObject 是 QWidget 的⽗类. ⾥⾯最主要的属性就是 objectName 
2. 在⼀个 Qt 程序中, objectName 相当于对象的⾝份标识, 彼此之间不能重复
3. 在使⽤ Qt Designer 时, 尤其是界⾯上存在多个 widget 的时候, 可以通过 objectName 获取到指定的 widget 对象

1. Qt Designer ⽣成的 ui ⽂件, 本⾝是 xml 格式的. qmake 会把这个 xml ⽂件转换成 C++ 的 .h
2. ⽂件(这个⽂件⽣成在 build ⽬录中), 构成⼀个 ui_widget 类
3. 每个 widget 的 objectName 最终就会成为 ui_widget 类的属性名字
4. 最终这个类的实例, 就是 Ui::Widget *ui , 因此就可以通过形如 ui->pushButton 或者 ui->pushButton_2 这样的代码获取到界⾯上的 widget 对象了.

class Ui_Widget
{
public:
    QPushButton *pushButton;
    QPushButton *pushButton_2;
    // ..................
}

2) ⽣成两个按钮的 slot 函数.

• 使⽤ isEnabled 获取当前按钮的可⽤状态.
• 使⽤ setEnabled 修改按钮的可⽤状态. 此处是直接针对原来的可⽤状态进⾏取反后设置.

void Widget::on_pushButton_clicked()
{
    qDebug() << "按下按钮";
}

void Widget::on_pushButton_2_clicked()
{
    bool flag = this->ui->pushButton->isEnabled();
    this->ui->pushButton->setEnabled(!flag);
}

运⾏程序, 可以看到, 初始情况下, 上⾯的按钮是可⽤状态.

2.3 geometry

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

• 但是实际开发中, 我们并不会直接使⽤这⼏个属性, ⽽是通过⼀系列封装的⽅法来获取/修改.  

 对于 Qt 的坐标系, 不要忘记是⼀个 "左⼿坐标系". 其中坐标系的原点是当前元素的⽗元素的左上⻆.

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

1) 在界面中拖五个按钮.

2) 在 widget.cpp 中编写四个按钮的 slot 函数  

void Widget::on_pushButton_up_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    rect.setY(rect.y() - 5);
    ui->pushButton_target->setGeometry(rect);
 }

void Widget::on_pushButton_down_clicked()
{
     QRect rect = ui->pushButton_target->geometry();
     rect.setY(rect.y() + 5);
     ui->pushButton_target->setGeometry(rect);
}

void Widget::on_pushButton_left_clicked()
{
     QRect rect = ui->pushButton_target->geometry();
     rect.setX(rect.x() - 5);
     ui->pushButton_target->setGeometry(rect);
}
void Widget::on_pushButton_right_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    rect.setX(rect.x() + 5);
    ui->pushButton_target->setGeometry(rect);
}

• 运⾏程序, 可以看到, 按下下⽅的四个按钮, 就会控制 target 的左上⻆的位置. 对应的按钮整个尺⼨也会发⽣改变.

上述代码中我们是直接设置的 QRect 中的 x, y . 实际上 QRect 内部是存储了左上和右下两个点的坐标, 再通过这两个点的坐标差值计算⻓宽.

单纯修改左上坐标就会引起整个矩形的⻓宽发⽣改变.

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

void Widget::on_pushButton_left_clicked()
{
     QRect rect = ui->pushButton_target->geometry();
     ui->pushButton_target->setGeometry(rect.x() - 5, rect.y(), rect.width(),
        rect.height());
}

void Widget::on_pushButton_right_clicked()
{
     QRect rect = ui->pushButton_target->geometry();
     ui->pushButton_target->setGeometry(rect.x() + 5, rect.y(), rect.width(),
        rect.height());
}

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 设置窗⼝标题
    this->setWindowTitle("这是标题");
}

2.5 windowIcon 

【注意】

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

代码⽰例: 设置窗⼝图标

2) 修改 widget.cpp  

#include <QIcon>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建图标对象
    QIcon icon("d:/rose.jpg");
    // 设置图标
    this->setWindowIcon(icon);
}

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

于此同时, 程序在任务栏中的图表也发⽣改变. 

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

如果使⽤相对路径, 则需要确保代码中的相对路径写法和图⽚实际所在的路径匹配 (⽐如代码

中写作 "./image/rose.jpg", 就需要在当前⼯作⽬录中创建 image ⽬录, 并把 rose.jpg 放进去).

1. 绝对路径: 以盘符(windows)或者以 / (Linux) 开头的路径.
2. 相对路径: 以 . (表⽰当前路径) 或者 以 .. (表⽰当前路径上级路径) 开头的路径. 其中 . 经常也 会省略. 相对路径的前提是需要明确 "当前⼯作⽬录".

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

void Widget::on_pushButton_add_clicked()
{
     float opacity = this->windowOpacity();
     if (opacity >= 1.0) {
         return;
     }
     qDebug() << opacity;
     opacity += 0.1;
     this->setWindowOpacity(opacity);
}

void Widget::on_pushButton_sub_clicked()
{
     float opacity = this->windowOpacity();
     if (opacity <= 0.0) {
         return;
     }
     qDebug() << opacity;
     opacity -= 0.1;
     this->setWindowOpacity(opacity);
}

2) 编写 widget.cpp  

#include <QPixmap>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建⼀个位图对象, 加载⾃定义光标图⽚
    QPixmap pixmap(":/huaji.png");
    // 缩放图⽚为 64 * 64 的尺⼨.
    pixmap = pixmap.scaled(64, 64);
    // 创建 QCursor 对象, 并指定 "热点" 为 (2, 2) 坐标位置.
    // 所谓 "热点" 就是⿏标点击时⽣效的位置.
    QCursor cursor(pixmap, 2, 2);
    // 设置光标
    this->setCursor(cursor);
}

2.8 font  

3) 执⾏程序, 观察效果  

2.9 toolTip  

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    ui->pushButton_yes->setToolTip("这个是 yes 按钮");
    ui->pushButton_yes->setToolTipDuration(3000);

    ui->pushButton_no->setToolTip("这个是 no 按钮");
    ui->pushButton_no->setToolTipDuration(10000);
}

 2.10 focusPolicy  

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

 通过 CSS 设置 widget 的样式.

CSS (Cascading Style Sheets 层叠样式表) 本⾝属于⽹⻚前端技术. 主要就是⽤来描述界⾯的样式.

所谓 "样式", 包括不限于大小, 位置, 颜⾊, 间距, 字体, 背景, 边框等.

我们平时看到的丰富多彩的⽹⻚, 就都会⽤到⼤量的 CSS.

Qt 虽然是做 GUI 开发, 但实际上和 ⽹⻚前端 有很多异曲同⼯之处. 因此 Qt 也引⼊了对于 CSS的⽀持.

1) 在界面上创建 label

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

3) 运⾏程序, 可以看到实际效果和预览效果基本⼀致. 、

（三）小结

QWidget 是 Qt 中最基本的用户界面类，它提供了一个抽象的概念，用于构建应用程序的窗口和用户界面。以下是 QWidget 的小结：

1. 继承关系：QWidget 继承自 QObject 类，因此具有 QObject 的属性和方法。它还是许多其他用户界面部件的基类，如QPushButton、QLineEdit等。

2. 窗口管理：QWidget 可以表示一个独立的窗口，也可以作为其他窗口部件的容器。它可以包含其他 QWidget 实例，形成层次结构。

3. 事件处理：QWidget 可以响应用户输入和系统事件，如鼠标点击、键盘按键等。它提供了事件处理机制，可以重写事件处理函数来处理特定类型的事件。

4. 样式和外观：QWidget 可以通过样式表来定制其外观和样式，包括背景颜色、字体、边框等。它还支持设置窗口图标、标题等属性。

总的来说，QWidget 提供了丰富的功能和灵活的扩展性，使得开发者可以方便地构建各种类型的用户界面应用程序。