缡墨

外观

004_limou_2024_04_27_qt_控件概述

约 9014 字大约 30 分钟

2025-04-09

了解控件是学习 Qt 的重要部分，窗口、按钮、文本框、单选按钮、复选按钮、下拉框都可以被称为控件或小组件（Widget），控件时构成一个图形化界面的基本要素。Qt 自带很多的基本控件，还支持程序员对现有控件做拓展，甚至直接自定义出新的控件。

而大部分的控件在 Qt 的 Qt Creator 界面设计页面中都有展示出来，但是 Qt 的默认样式颜值比较一般，但是后来的 Qt Design Studio 制作出来的界面程序很接近于现代界面设计，但是目前收费（而且和我们学的基本 Qt 知识还有些许区别）。

并且，所有的基本控件类都是继承自 QWidget{/*...*/};，可以在界面设计页面中进行查看和修改。

image-20240428193514029
image-20240428193514029
属性作用
enabled设置控件是否可使用，true 表示可用，false 表示禁用。所谓的禁用实际上就是无法接受用户的任何输入事件，外观上通常显示为灰色，而且控件对象的子控件也会被禁用。
geometry位置和尺寸，包含 x、y、width、height 四个部分，坐标是以父元素为参考进行设置的（前两者描述控件的坐标，后两者描述控件的尺寸）。
windowTitle设置 widget 标题。
windowIcon设置 widget 图标。
windowOpacity设置 widget 透明度。
cursor鼠标悬停时显示的图标形状，在 Qt Designer 界面中可以清楚看到可选项。
font字体相关属性，涉及到字体家族、字体大小、粗体、斜体、下划线等样式。
toolTip鼠标悬停在 widget 上会在状态栏中显示的提示信息。
toolTipDuringtoolTip 显示的持续时间。
statusTipWidget 状态发生改变时显示的提示信息(比如按钮被按下等)。
whatsThis鼠标悬停并按下 [alt+F1] 时，显示的帮助信息(显示在一个弹出的窗口中)。
styleSheet允许使用 CSS 来设置 widget 中的样式。Qt 中支持的样式非常丰富，对于前端开发人员上手是非常友好的。
focusPolicy控件如何获取焦点。
contextMenuPolicy上下文菜单的显示策略。
locale设置语言和国家地区。
acceptDrops部件是否接受拖放操作。
minimumSize控件的最小尺寸。包含最小宽度和最小高度。
maximumSize控件的最大尺寸。包含最大宽度和最大高度。
sizePolicy尺寸策略。设置控件在布局管理器中的缩放方式。
windowModality指定窗口是否具有 "模态" 行为。
sizeIncrement拖动窗口大小时的增量单位。
baseSize窗口的基础大小，用来搭配 sizeIncrement 调整组件尺寸时计算组件应该调整到的合适的值。
palette调色板。可以设置 widget 的颜色风格。
mouseTracking是否跟踪鼠标移动事件。
tabletTracking是否跟踪触摸屏的移动事件。
layoutDirection布局方向。
autoFillBackground是否自动填充背景颜色。
windowFilePath将 widget 与一个本地文件路径关联起来。
accessibleName设置 widget 的可访问名称。
accessibleDescription设置 widget 的详细描述。
inputMethodHints针对输入框有效，用来提醒用户当前能输入的合法数据的格式。比如只能输入数字、只能输入日期等。

1.1.控件使能

另外还有一系列的方法：

  • isEnabled()：获取控件的可用状态
  • setEnabled()：设置控件的可用状态
//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

public:
    void Handle(QPushButton* button);

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QDebug>

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

    QPushButton* button = new QPushButton(this);
    button->setText("按钮");
    connect(button, &QPushButton::clicked, this, [=](){
        Handle(button);
    });
}

Widget::~Widget()
{
    delete ui;
}

void Widget::Handle(QPushButton* button)
{
    qDebug() << "Handle()\n";
    button->setEnabled(false);
}

上面代码就可以在按钮点击后，取消对按钮的使能。

1.2.位置尺寸

  • geometry()：则可以获取控件的位置和尺寸，返回结果就是四元素的 QRect，也就是一个矩形对象
  • setGeometry(QRect) 和 setGeometry(int x, int y, int width, int height)：设置控件的位置和尺寸，直接设置一个 QRect 或者分成四个属性单独设置

补充：Qt 还对各种几何图形所需要的属性进行了抽象，产生了各种轻小的几何类。例如 QRect 矩形对象，包含 x, y, width, height 属性，还有 QSize 尺寸对象，包含 width, height 属性。

我们直接拖拽出五个按钮控件，分别命名转到槽进行设置。

image-20240428211720786
image-20240428211720786
//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_pushButton_up_clicked();

    void on_pushButton_left_clicked();

    void on_pushButton_right_clicked();

    void on_pushButton_down_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

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

Widget::~Widget()
{
    delete ui;
}

void Widget::on_pushButton_up_clicked()
{
    //获取 target 本身的 geometry
    QRect rect = ui->pushButton_target->geometry();
    rect.setY(rect.y() - 5); //这里只是对矩形对象本身做了修改, 该对象只是对控件的拷贝
    ui->pushButton_target->setGeometry(rect);
    qDebug() << rect;
}

void Widget::on_pushButton_left_clicked()
{
    //获取 target 本身的 geometry
    QRect rect = ui->pushButton_target->geometry();
    rect.setX(rect.x() - 5);
    ui->pushButton_target->setGeometry(rect);
    qDebug() << rect;
}

void Widget::on_pushButton_right_clicked()
{
    //获取 target 本身的 geometry
    QRect rect = ui->pushButton_target->geometry();
    rect.setX(rect.x() + 5);
    ui->pushButton_target->setGeometry(rect);
    qDebug() << rect;
}

void Widget::on_pushButton_down_clicked()
{
    //获取 target 本身的 geometry
    QRect rect = ui->pushButton_target->geometry();
    rect.setY(rect.y() + 5);
    ui->pushButton_target->setGeometry(rect);
    qDebug() << rect;
}

但是上述指修改了 x、y 能否保持尺寸不变呢？可以进一步修改代码。

//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

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

Widget::~Widget()
{
    delete ui;
}

void Widget::on_pushButton_up_clicked()
{
    //获取 target 本身的 geometry
    QRect rect = ui->pushButton_target->geometry();
    //rect.setY(rect.y() - 5); //这里只是对矩形对象本身做了修改, 该对象只是对控件的拷贝
    //ui->pushButton_target->setGeometry(rect);

    ui->pushButton_target->setGeometry(rect.x(), rect.y() - 5, rect.width(), rect.height());

    qDebug() << rect;
}

void Widget::on_pushButton_left_clicked()
{
    //获取 target 本身的 geometry
    QRect rect = ui->pushButton_target->geometry();
    //rect.setX(rect.x() - 5);
    //ui->pushButton_target->setGeometry(rect);

    ui->pushButton_target->setGeometry(rect.x() - 5, rect.y(), rect.width(), rect.height());

    qDebug() << rect;
}

void Widget::on_pushButton_right_clicked()
{
    //获取 target 本身的 geometry
    QRect rect = ui->pushButton_target->geometry();
    //rect.setX(rect.x() + 5);
    //ui->pushButton_target->setGeometry(rect);

    ui->pushButton_target->setGeometry(rect.x() + 5, rect.y(), rect.width(), rect.height());

    qDebug() << rect;
}

void Widget::on_pushButton_down_clicked()
{
    //获取 target 本身的 geometry
    QRect rect = ui->pushButton_target->geometry();
    //rect.setY(rect.y() + 5);
    //ui->pushButton_target->setGeometry(rect);

    ui->pushButton_target->setGeometry(rect.x(), rect.y() + 5, rect.width(), rect.height());

    qDebug() << rect;
}
recording
recording

还有一点您需要注意的是，如果 widget 作为⼀个窗⼝ (带有标题栏, 最小化, 最大化, 关闭按钮), 那么在计算尺寸和坐标的时候就有两种算法，包含 Window frame 和不包含 Window frame。

  • 包含 window frame：

    (1)pos() 返回一个 QPoint 对象，包含 x(), y() 元素和 setX(), setY() 方法

    (2)frameSize() 返回一个 QSize 对象，包含 width(), height() 元素和 setWidth(), setHeight() 方法

    (3)frameGeometry() 返回一个 QRect 对象，可以用成员函数获取上述元素，也可以使用 setFrameGeometry() 来一次性设置

  • 不包含 window frame：

    (1)mapToParent() 返回一个 QPoint 对象，包含 x(), y() 元素和 setX(), setY() 方法

    (2)size() 返回一个 QSize 对象，包含 width(), height() 元素，还有 setWidth(), setHeight()

    (3)geometry() 返回一个 QRect 对象，可以用成员函数获取上述元素，也可以使用 setGeometry() 来一次性设置。rect() 作用和 geometry() 类似，但是其成员函数可以直接修改拷贝到的 QRect 对象

当然，如果⼀个不是作为窗⼝的 widget ，上述两类⽅式得到的结果是⼀致的。

而包不包含最明显的区别，就是以父控件窗口 QWidget 的左上角为原点，还是 Window frame 的左上角为原点。

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

public:
    void Handle();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QPushButton>

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

    //这里只演示 frameGeometry() 和 geometry()
    QRect rect1 = this->frameGeometry();
    QRect rect2 = this->geometry();

    //此时控件还在构造中, 还没有加入到 window frame 中, 因此下面打印时没有区别的
    qDebug() << "未被加入 window frame: " << rect1;
    qDebug() << "未被加入 window frame: " << rect2;

    //我们通过按钮来打印再来查看
    QPushButton* button = new QPushButton(this);
    button->setText("按钮");
    button->move(100, 100);
    connect(button, &QPushButton::clicked, this, &Widget::Handle);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::Handle()
{
    //这里只演示 frameGeometry() 和 geometry()
    QRect rect1 = this->frameGeometry();
    QRect rect2 = this->geometry();

    //此时控件早就件构造好了, 已经加入到 window frame 中, 因此下面打印时没有区别的
    qDebug() << "已经加入 window frame: " << rect1;
    qDebug() << "已经加入 window frame: " << rect2;
}

可以发现位置和尺寸都有变化，位置变化好理解，因为原点发生了变化，那为什么尺寸也会发生变化呢？因为作为整个窗口的控件尺寸从单纯的控件尺寸变成了整个窗口的尺寸。

1.3.窗口参数

1.3.1.窗口标题

windowTitle() 可以获取到 windowTitle 属性。

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

public:
    void Handle();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QPushButton>

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

    //设置新的标题
    this->setWindowTitle("窗口标题");

    //我们通过按钮来打印再来查看
    QPushButton* button = new QPushButton(this);
    button->setText("按钮");
    button->move(100, 100);

    //下面代码没有办法修改标题, 应该按钮不是窗口控件
    button->setWindowTitle("新的窗口标题"); //不过这个代码也没有报错, 不太科学, 尤其再查看文档的时候, 可能会非常困扰

    connect(button, &QPushButton::clicked, this, &Widget::Handle);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::Handle()
{
    this->setWindowTitle("新的窗口标题");
    qDebug() << this->windowTitle();
}

1.3.2.窗口图标

而 windowIcon 可以使用 windowIcon() 接口来获取窗口的图标，返回 QIcon 对象。还可以使用 setWindowIcon(QIcon& icon) 来把提前做好的 .icon 图标设置为窗口图标。

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QIcon>

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

    //设置新的标题
    this->setWindowTitle("标题");

    //设置图标
    QIcon icon("图标路径...可以写成 '/' 的路径"); //这里需要您自己修改
    this->setWindowIcon(icon);
}

Widget::~Widget()
{
    delete ui;
}

但是如果图片所在路径在用户的机器上误删除了，就会导致图片资源无法加载，因此就会有 qrc 机制，给 Qt 羡慕引入一个 xml 文件，后缀名使用 .qrc 表示，把图片资源导入，并且在 xml 中记录。

编译项目的时候，就会根据 qrc 中描述的图片信息，找带图片的内容，提取出图片的二进制数据，把二进制数据转化为 C++ 代码，最终硬编码到 .exe 文件中。不过这种方式不能导入过多的文件资源，否则会导致编译文件变大。

我们可以来简单试一试上述提到的 qrc 机制。

image-20240429114924833
image-20240429114924833
image-20240429115018157
image-20240429115018157
image-20240429115040415
image-20240429115040415
image-20240429115109842
image-20240429115109842

然后添加“前缀”，实际上就是添加 Qt 的抽象虚拟路径，qrc 机制其实就是把图片的二进制数据转化为 C++ 中较大的 char 数组。而为了方便我们在 Qt 代码中访问图片就可以通过这个虚拟目录来访问。

image-20240429115218089
image-20240429115218089

导入图片（只能导入和 resource.qrc 文件同一个目录下的文件），转化为二进制数据。

image-20240429120047039
image-20240429120047039
image-20240429120339375
image-20240429120339375
image-20240429120411126
image-20240429120411126

若可以观察到缩略图说明导入成功。

image-20240429120436539
image-20240429120436539
image-20240429121422046
image-20240429121422046

则在代码中可以编写如下：

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QIcon>

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

    //设置新的标题
    this->setWindowTitle("标题");

    //设置图标
    QIcon icon(":/limou.png"); //注意需要使用 ":" 作为开头
    this->setWindowIcon(icon);
}

Widget::~Widget()
{
    delete ui;
}
image-20240429120726980
image-20240429120726980

如果我们查看 Debug 模式下生成的文件：

# build-my_code_2024_2_29-Desktop_Qt_5_14_0_MinGW_64_bit-Debug 的目录
04/29/2024  12:07 PM    <DIR>          .
04/29/2024  10:21 AM    <DIR>          ..
04/29/2024  10:21 AM             1,123 .qmake.stash
04/29/2024  11:25 AM           575,840 main.o
04/29/2024  12:07 PM            77,921 Makefile
04/29/2024  10:21 AM            14,621 moc_predefs.h
04/29/2024  11:25 AM             2,729 moc_widget.cpp
04/29/2024  11:25 AM           486,350 moc_widget.o
04/29/2024  12:07 PM         1,649,310 my_code_2024_2_29.exe
04/29/2024  12:07 PM           686,085 qrc_resource.cpp
04/29/2024  12:07 PM           137,851 qrc_resource.o
04/29/2024  10:21 AM             1,144 ui_widget.h
04/29/2024  12:07 PM           522,789 widget.o

里面多了一个文件 qrc_resource.cpp，我们打开来看一下。

//qrc_resource.cpp
/****************************************************************************
** Resource object code
**
** Created by: The Resource Compiler for Qt version 5.14.0
**
** WARNING! All changes made in this file will be lost!
*****************************************************************************/

static const unsigned char qt_resource_data[] = {
  // D:/GitWork/limou-c-test-code/my_code_2024_2_29/limou.png
  0x0,0x2,0x5,0x27,
  0x89,
  0x50,0x4e,0x47,0xd,0xa,0x1a,0xa,0x0,0x0,0x0,0xd,0x49,0x48,0x44,0x52,0x0,
  0x0,0x7,0x80,0x0,0x0,0x2,0xe0,0x8,0x6,0x0,0x0,0x0,0x75,0x6e,0x6a,0x3b,
  0x0,0x0,0x0,0x1,0x73,0x52,0x47,0x42,0x0,0xae,0xce,0x1c,0xe9,0x0,0x0,0x0,
  0x4,0x67,0x41,0x4d,0x41,0x0,0x0,0xb1,0x8f,0xb,0xfc,0x61,0x5,0x0,0x0,0x0,
  0x9,0x70,0x48,0x59,0x73,0x0,0x0,0xe,0xc3,0x0,0x0,0xe,0xc3,0x1,0xc7,0x6f,
  0xa8,0x64,0x0,0x0,0xff,0xa5,0x49,0x44,0x41,0x54,0x78,0x5e,0xec,0xfd,0x87,0x9b,
  0x24,0xd7,0x7d,0xa6,0xb,0x76,0xfa,0xcc,0xb2,0xdd,0xd5,0x1e,0xed,0x60,0x1a,0xae,
  0x61,0x9,0x80,0x0,0xe8,0xad,0x48,0x4a,0xa2,0x28,0xca,0x91,0x9a,0x3b,0x33,0x9a,
  0x1d,0x73,0xef,0xec,0xec,0xde,0xdd,0xbf,0x66,0xef,0xde,0x3b,0x73,0x9f,0x9d,0xb9,
  0x33,0x23,0xcd,0x50,0x94,0x99,0x11,0x49,0x91,0x14,0x25,0xba,0xa1,0x24,0x8a,0x16,
  0x20,0xe1,0x8,0x4f,0x0,0xdd,0x68,0x6f,0xaa,0xab,0x2a,0x7d,0x66,0xed,0xf7,0x45,
  0xc5,0x29,0x26,0x8a,0xdd,0x8d,0x32,0x99,0x59,0x91,0x91,0xef,0xfb,0x3c,0x5f,0x9d,
//...

这些资源都被转化为二进制数据的数组，编译时从这里查找即可。

注意：上述接口只能针对顶层的窗口控件有效，对其他非顶层控件都是无效的，不过 Qt 不会报告相关的错误，这点其实有点坑...

1.3.3.窗口透明

使用 windowOpacity() 就可以获取到不透明数值，返回 float，取值 0.0(全透明)->1.0(不透明)，而使用 setWindowOpacity(float n) 来设置透明度。

image-20240429130254416
image-20240429130254416
//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_up_clicked();

    void on_down_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QDebug>

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

}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_up_clicked()
{
    float opacity = this->windowOpacity();
    if (opacity >= 1.0)
        return;

    qDebug() << opacity;
    opacity += 0.1;
    this->setWindowOpacity(opacity);
}

void Widget::on_down_clicked()
{
    float opacity = this->windowOpacity();
    if (opacity <= 0.0)
        return;

    qDebug() << opacity;
    opacity -= 0.1;
    this->setWindowOpacity(opacity);
}
image-20240429130415022
image-20240429130415022

补充：这里又有个小细节，透明度的变化不是精确的，因为这是浮点数的加减法运算，而浮点数不一点可以被精确存储...

image-20240429130530127
image-20240429130530127

1.4.鼠标样式

使用 cursor() 可以获取当前控件的 cursor 属性，返回的是 QCursor 对象，内部是鼠标悬停在控件上显示的样式。

setCursor(const QCursor& cursor) 可以设置一个控件内鼠标的样式，而 QGuiApplication::setOverrideCursor(const QCursor& cursor) 则可以设置整程序内的鼠标样式。

可以通过图形化界面来设置，也可以通过代码来设置。

recording
recording

代码的话如下：

image-20240429140709470
image-20240429140709470
//widget.h
#include "widget.h"
#include "ui_widget.h"
#include <QCursor>

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

    QCursor cursor(Qt::WaitCursor); //鼠标等待样式, 传递的实际上是一个枚举对象
    ui->button->setCursor(cursor);
}

Widget::~Widget()
{
    delete ui;
}
recording
recording

果然触发了鼠标的等待效果（我的鼠标是经过定制化的，您的可能是别的等待图标）。

不过我们也可以使用图片来自定义鼠标样式。

image-20240429143856796
image-20240429143856796
//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QCursor>
#include <QPixmap>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPixmap pixmap(":/arrow.png"); //导入图片资源
    pixmap = pixmap.scaled(50, 50); //修改图片大小
    QCursor curson(pixmap, 5, 5); //转化为光标样式, 默认情况下鼠标的点击生效位置（鼠标热点）为图片的左上角, 不过可以设置一下
    ui->button->setCursor(curson);
}

Widget::~Widget()
{
    delete ui;
}

1.5.字体样式

使用 font() 来获取字体属性，还可以使用 setFont() 来设置当前控件中的字体信息。

返回的 QFont 对象包含下列属性：

  • family: 字体族，如 Arial、Times New Roman 等
  • pointSize: 字体大小，以 px 为单位
  • weight: 字体粗细，填写 [0, 99] 或 QFont.Weight 枚举值表示，如 QFont.Light、QFont.Normal、QFont.Bold 等
  • italic: 是否为斜体，设置为 true 或 false
  • bold: 是否为粗体，设置为 true 相当于 weight=75；设置为 false 相当于 weight=50
  • underline: 是否有下划线
  • strikeOut: 是否有删除线
  • ...
image-20240429155124347
image-20240429155124347

或者使用直接代码。

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QFont>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QLabel* label = new QLabel(this);
    label->setText("This is a text.");

    //构造字体对象
    QFont font;
    font.setFamily("Consolas");
    font.setPixelSize(40);
    font.setBold(true);
    font.setItalic(true);
    font.setUnderline(true);
    font.setStrikeOut(true);

    //设置字体
    label->setFont(font);
}

Widget::~Widget()
{
    delete ui;
}

1.6.悬浮提示

有时把鼠标图标放置在某个控件上可以弹出操作提示，能够提示用户和软件进行交互。

可以使用 setToolTip() 来设置 toolTip 属性，还可以使用 setToolTipDuring() 来设置 toolTip 的提示时间，单位时间为 ms。

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QFont>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QLabel* label = new QLabel(this);
    label->setText("This is a text.");

    //构造字体对象
    QFont font;
    font.setFamily("Consolas");
    font.setPixelSize(40);
    font.setBold(true);
    font.setItalic(true);
    font.setUnderline(true);
    font.setStrikeOut(true);

    //设置字体
    label->setFont(font);

    //设置提示
    label->setToolTip("这是上面小节中设置的字体标签");
}

Widget::~Widget()
{
    delete ui;
}
recording
recording

1.7.控件焦点

对于键盘操作会比较明显，例如使用输入框时，必须将该控件作为焦点时，键盘输入才可以进行持续的输入，使用 Tab 通常可以切换界面的焦点。

一般来说，获取焦点有两种方式：

  • 使用鼠标点击控件获取焦点
  • 使用 Tab 制表符切换控件获取焦点

而控件使用 Qt::FocusPolicy 枚举类型来指定对应的的焦点策略，该枚举类型有以下取值，对应不同的焦点策略：

  • Qt::NoFocus：控件不会接收键盘焦点
  • Qt::TabFocus：控件可以通过 Tab 键接收焦点
  • Qt::ClickFocus：控件在鼠标点击时接收焦点
  • Qt::StrongFocus：控件可以通过 Tab 键和鼠标点击接收焦点，这是默认值
  • Qt::WheelFocus：类似于 Qt::StrongFocus，同时控件也可以通过鼠标滚轮获取焦点（很少使用）
image-20240501181338578
image-20240501181338578

image-20240501181529799 可以看到，四个文本框都是默认 StrongFocus 属性，可以在这里直接进行设置，这里我先不设置，后面使用代码进行设置。先来运行一下，尝试切换焦点。

recording
recording

也可以使用接口 setFocusPolicy() 调整焦点策略，让所有的文本框取消焦点，使得鼠标和 Tab 都无法选择焦点。

1.8.控件样式

在 Qt 中，可以使用样式表（StyleSheet）来设置控件的外观和样式。样式表类似于 CSS，允许以类似于 HTML 标签的方式指定控件的样式属性，如背景颜色、字体、边框等，但是 Qt 的样式表不如 CSS 完整，可也算好用。

首先需要创建一个样式表字符串，用于描述控件的样式属性。然后使用 QWidget 类的 setStyleSheet() 将样式表应用到控件上。

image-20240501185234902
image-20240501185234902

或者使用代码来设置样式。

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建一个按钮，并设置样式表
    QPushButton *button = new QPushButton(this);
    button->setText("按钮");
    button->setStyleSheet("QPushButton {"
                          "background-color: #4CAF50;"
                          "border: none;"
                          "color: white;"
                          "padding: 10px 20px;"
                          "text-align: center;"
                          "text-decoration: none;"
                          "display: inline-block;"
                          "font-size: 16px;"
                          "margin: 4px 2px;"
                          "cursor: pointer;"
                          "}");
}

Widget::~Widget()
{
    delete ui;
}

或者来写一个黑暗主题和白天主题的切换代码。

image-20240501215140151
image-20240501215140151
//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_light_clicked();

    void on_black_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#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;
}

void Widget::on_light_clicked()
{
    this->setStyleSheet("background-color: f0f0f0;");
    ui->light->setStyleSheet("background-color: black; color: red");
}

void Widget::on_black_clicked()
{
    this->setStyleSheet("background-color: black;");
    ui->black->setStyleSheet("background-color: f0f0f0; color: blue");
}

1.9.阅读障碍

有时为了方便一些具有阅读障碍的群体，可能会使用到 accessibleName、accessibleDescription 属性，使用类似屏幕阅读器的辅助技术来辅助使用和阅读软件。

2.QAbstractButton

以下是各种按钮的继承关系所有的按钮都继承自 QAbstractButton{/*...*/};，而该类又继承自 QWidget{/*...*/};，因此之前详细介绍的 QWidget 属性对应这个按钮类来说都是有效可用的，后续的控件类也有类似的特点，之后我不再重述。

  • QPushButton{/*...*/};：用于创建普通的按钮，通常用于触发操作或打开对话框等操作
  • QCheckBox{/*...*/};：用于创建复选框，允许用户选择或取消选择一个或多个选项
  • QRadioButton{/*...*/};：用于创建单选按钮，允许用户在一组中选择一个选项
  • QToolButton{/*...*/};：用于创建工具按钮，通常用于工具栏或工具箱中，可以包含图标和文本，并且可以与菜单、下拉菜单等关联

这里介绍以下父类 QAbstractButton{/*...*/}; 的基本属性。

属性作用
text按钮中的文本
icon按钮中的图标
iconSize按钮中的尺寸
shortCut按钮对应快捷键
autoRepeat按钮重复触发，设置为 true 时，鼠标左键按住不放就会持续产生鼠标点击事件；设置为 false 时，鼠标左键必须提前释放后，再次按下点击才会发送鼠标点击事件。
autoRepeatDelay重复触发的延迟时间，当用户按住按钮一段时间后，按钮开始触发重复事件的时间间隔
autoRepeatInterval重复触发的周期，每隔一个周期重复触发事件

最后两个属性举个例子来进行区分，假设 autoRepeatDelay 设置为 500 毫秒，autoRepeatInterval 设置为 100 毫秒：

  • 用户按住按钮不放，等待 500 毫秒（延迟时间）后，按钮开始触发第一次事件
  • 之后每隔 100 毫秒（周期间隔），按钮触发一次事件，直到用户释放按钮

而属性设置的相关接口也很统一，和之前一样的设计，我们使用一份代码来运用一下，先提前导入按钮资源图片。

image-20240505214449251
image-20240505214449251

然后简便一些，直接拓展生成一个按钮。

image-20240505214615713
image-20240505214615713
//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QIcon>
#include <QSize>

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

    //创建图标对象并且设置为按钮的图标
    QIcon icon(":/img/button.png");
    ui->pushButton->setIcon(icon);
    ui->pushButton->setIconSize(QSize(50, 50));
}

Widget::~Widget()
{
    delete ui;
}
image-20240505215218068
image-20240505215218068

我们再尝试更多的按钮设置...

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_pushButton_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QIcon>
#include <QSize>
#include <QKeySequence>

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

    //设置窗口的标题
    this->setWindowTitle("标题一");

    //创建图标对象并且设置为按钮的图标
    QIcon icon(":/img/button.png");
    ui->pushButton->setIcon(icon);
    ui->pushButton->setIconSize(QSize(50, 50));

    //给按钮添加快捷键 [b] 方便点击按钮
    //QKeySequence ks("b");
    //ui->pushButton->setShortcut(ks);
    ui->pushButton->setShortcut(Qt::Key::Key_B); //这种方式设计的快捷键不会出现按键拼写错误的问题, 出错了编译器也可以帮助警告

    //默认是鼠标不允许连发, 但是按钮运行连发, 因此这里尝试修改鼠标为连发
    ui->pushButton->setAutoRepeat(true);
}

Widget::~Widget()
{
    delete ui;
}

//按钮的点击事件
void Widget::on_pushButton_clicked()
{
    if(this->windowTitle() == "标题一")
        this->setWindowTitle("标题二");
    else
        this->setWindowTitle("标题一");
}
20240505221426
20240505221426

2.1.QPushButton

这个类创建的就是普通的按钮对象，您主要应用其父类的属性和方法，并且能够绑定事件方法就足够了...

2.2.QRadioButton

这个类创建的就是单选按钮对象。

属性作用
checkable是否能被选中，注意哪怕设置为 false 也可以触发点击事件
checked是否已经选中，checkable 是 checked 的前提条件
autoExclusive是否排他，也就是选中一个按钮之后是否取消其他按钮的选中，默认设置为为排他
//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_radioButton_1_clicked();
    void on_radioButton_2_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QIcon>
#include <QSize>
#include <QKeySequence>

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

    //1.设置窗口的标题
    this->setWindowTitle("标题一");

    //2.禁用第一个按钮
    //ui->radioButton_1->setCheckable(false);

    //5.取消按钮 3 的排他设置, 但是其他按钮都保持排他, 哪怕有按钮被禁用也要算进去...
    ui->radioButton_3->setAutoExclusive(false);
}

Widget::~Widget()
{
    delete ui;
}

//3.设置按钮 1 的点击事件, 这里可以发现哪怕禁选了按钮 1, 对应的点击事件也会被触发
void Widget::on_radioButton_1_clicked()
{
    //如果按钮被选中, 就把标题进行修改
    if(this->windowTitle() == "标题一")
        this->setWindowTitle("标题二");
    else
        this->setWindowTitle("标题一");
}

//4.设置按钮 2 的点击事件
void Widget::on_radioButton_2_clicked()
{
    //如果按钮被选中, 就把标题进行修改
    if(ui->radioButton_2->isChecked() == true)
    {
        this->setWindowTitle("新标题");
    }
    ui->radioButton_2->setChecked(false); // 取消按钮选中状态
}

注意上述代码中禁用按钮时的注意事项，禁用单选按钮也可以触发事件，并且也支持排他属性。如果希望禁用得更加彻底一些，则可以使用 setEnabled(bool)，而不是使用 checkable(bool)，设置后的按钮无法选中，也无法响应任何输入。

这里还需要提及之前没有提到的两个信号。

image-20240507135113273
image-20240507135113273
image-20240507135154484
image-20240507135154484
// widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_radioButton_1_clicked(bool checked);

    void on_radioButton_2_pressed();

    void on_radioButton_3_released();

    void on_radioButton_4_toggled(bool checked);

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
// widget.c
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->radioButton_1->setAutoExclusive(false); // 不排它
    ui->radioButton_2->setAutoExclusive(false); // 不排它
    // ui->radioButton_3->setAutoExclusive(false); // 不排它
    // ui->radioButton_4->setAutoExclusive(false); // 不排它
}

Widget::~Widget()
{
    delete ui;
}

// 选中一次则触发 clicked() 信号
void Widget::on_radioButton_1_clicked(bool checked) // 可以看到和之前普通的 clicked() 信号不同, 这里多了一个参数
{
    // checked 就表示当前单选按钮是否被选中
    qDebug() << "radioButton_1_checked: " << checked;
}

// 鼠标按下则触发 pressed() 信号
void Widget::on_radioButton_2_pressed()
{
    qDebug() << "pressed";
}

// 鼠标松开则触发 released() 信号
void Widget::on_radioButton_3_released()
{
    qDebug() << "released";
}

// 选中或者取消触发 toggled() 信号
void Widget::on_radioButton_4_toggled(bool checked)
{
    qDebug() << "radioButton_4_checked: " << checked;
}
  • clicked() 信号在按钮被鼠标完整点击时发出
  • clicked(tool) 信号在按钮被鼠标完整点击时发出，返回是否被选中的状态
  • pressed 表示⿏标按下
  • released 表示鼠标释放
  • toggled(tool) 信号在按钮状态被切换时发出，返回是否被选中的状态（状态切换既包含用户导致切换，又包含代码导致切换）

补充：这里还需要注意排他的问题，上述单选按钮的排他属性太简单粗暴了，一个界面内所有的单选按钮都是互相排他的。如果希望某一组单选按钮是互相排他的，则可以使用 QButtonGroup{/*...*/}; 创建对象，然后使用 addButton() 把一组的单选按钮添加到对象中作为一组。

// widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
// widget.c
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QButtonGroup>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QButtonGroup* bg1 = new QButtonGroup(this);
    QButtonGroup* bg2 = new QButtonGroup(this);
    bg1->addButton(ui->radioButton_1);
    bg1->addButton(ui->radioButton_2);
    bg2->addButton(ui->radioButton_3);
    bg2->addButton(ui->radioButton_4);
}

Widget::~Widget()
{
    delete ui;
}

2.3.QCheckBox

这个类创建的就是复选按钮对象，允许选中多个选项，其独有的属性 tristate 用来实现“三态复选框”，但是我们一般不怎么使用。

image-20240507155922305
image-20240507155922305
// widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_ok_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
// widget.c
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QString>

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

Widget::~Widget()
{
    delete ui;
}

void Widget::on_ok_clicked()
{
    QString result;
    if (ui->learn->isChecked()) {
        result += ui->learn->text();
    }
    if (ui->sleep->isChecked()) {
        result += ui->sleep->text();
    }
    if (ui->game->isChecked()) {
        result += ui->game->text();
    }
    qDebug() << "选中的内容: " << result;
}

2.4.QToolButton

待补充...

3.QFrame

属性作用
frameShape可以⽤来设置边框性质，值可以为 QFrame::Box(矩形边框), QFrame::Panel(带有可点击区域的⾯板边框), QFrame::WinPanel(Windows⻛格的边框), QFrame::HLine(⽔平线边框), QFrame::VLine(垂直线边框), QFrame::StyledPanel(带有可点击区域的⾯板边框，但样式取决于窗⼝主题)

这个属性基本不会独自使用，后面再来演示...

3.1.QLabel

QLabel 的重要属性如下。

属性作用
textFormat文本的格式，可以设置为 Qt::PlainText(纯文本)、Qt::RichText(富文本)、Qt::MarkdownText(Markdown)、Qt::AutoText(根据文本内容自动决定文本格式)
text控件中的文本
pixmap控件内部包含的图像
scaledContents设为 true 表示内容自动拉伸填充，设为 false 则不会自动拉伸
alignment对齐方式，例如设置 Qt::AlignHCenter(水平方向居中对齐) 和 Qt::AlignVCenter(垂直方向居中对齐)
wordWrap设为 true 内部的文本会自动换行，设为 false 则内部文本不会自动换行
indent设置文本缩进，水平和垂直方向都生效
margin内部文本和边框之间的边距，不同于 indent，这个属性上下左右四个方向都同时有效，而 indent 最多只是两个方向有效（具体哪两个方向有效取决于 alignment）
openExternalLinks是否允许打开一个外部链接（当文本内容包含 URL 时会用到）
buddy给 QLabel 控件关联一个“伙伴”，这样点击 QLabel 时就能激活对应的伙伴

我们先来尝试设置文本格式，然后给标签不同的文本值。

// widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

而我们更多的时候希望通过 QLabel 来作为一个更单纯显示图片的方式。

// widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
// widget.c
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QPixmap>

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

    // 设置标签大小和窗口一样大
    ui->label->setGeometry(0, 0, this->width(), this->height());

    // 设置标签内部的额图片
    QPixmap pixmap(":/new/prefix/limou.png");
    ui->label->setPixmap(pixmap);
}

Widget::~Widget()
{
    delete ui;
}
image-20240507163652006
image-20240507163652006

但是如果我们放大窗口，就会发现图片没有填充整个窗口，因此需要进行伸缩设置。

// widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
// widget.c
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QPixmap>

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

    // 设置标签大小和窗口一样大
    ui->label->setGeometry(0, 0, this->width(), this->height());

    // 设置标签内部的额图片
    QPixmap pixmap(":/new/prefix/limou.png");
    ui->label->setPixmap(pixmap);

    // 设置内容伸缩
    ui->label->setScaledContents(true);
}

Widget::~Widget()
{
    delete ui;
}

此时拉伸窗口图片也会跟着变化。

补充：此处的 resizeEvent 函数我们没有⼿动调⽤, 但是能在窗⼝⼤⼩变化时被⾃动调⽤. 这个过程就是依赖 C++ 中的多态来实现的. Qt 框架内部管理着 QWidget 对象表⽰咱们的窗 ⼝. 在窗⼝⼤⼩发⽣改变时, Qt 就会⾃动调⽤ resizeEvent 函数. 但是由于实际上这个表⽰窗⼝的并⾮是 QWidget, ⽽是 QWidget 的⼦类, 也就是咱们⾃⼰写 的 Widget. 此时虽然是通过⽗类调⽤函数, 但是实际上执⾏的是⼦类的函数(也就是我们重写 比特就业课 后的 resizeEvent ). 此处属于是 多态 机制的⼀种经典⽤法. 通过上述过程, 就可以把⾃定义的代码, 插⼊到框架内 部执⾏. 相当于 "注册回调函数" .

我们再来尝试文本对齐、自动换行、自动缩进、设置边距...

// widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
// widget.c
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QString>

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



    ui->label_1->setStyleSheet("background-color: #606060;"); // 更换标签颜色
    ui->label_1->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter); // 设置居中对齐(水平居中+垂直居中)
    ui->label_1->setText("垂直⽔平居中的⽂本");

    ui->label_2->setAlignment(Qt::AlignTop | Qt::AlignLeft); // 设置自动换行(顶部对齐+左部对齐)
    ui->label_2->setStyleSheet("background-color: #606060;"); // 更换标签颜色
    ui->label_2->setText("偏左上的⽂本");

    ui->label_3->setAlignment(Qt::AlignBottom | Qt::AlignRight); // 设置首行缩进（底部对齐+右部对齐）
    ui->label_3->setStyleSheet("background-color: #606060;"); // 更换标签颜色
    ui->label_3->setText("偏右下的⽂本");

    ui->label_4->setStyleSheet("background-color: #606060;"); // 更换标签颜色
    ui->label_4->setMargin(10); // 设置文本边距
    ui->label_4->setText("这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本");

    ui->label_5->setStyleSheet("background-color: #606060;"); // 更换标签颜色
    ui->label_5->setWordWrap(true); // 设置自动换行
    ui->label_5->setText("这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本");

    ui->label_6->setStyleSheet("background-color: #606060;"); // 更换标签颜色
    ui->label_6->setIndent(20); // 设置自动缩进
    ui->label_6->setText("这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本");
}


Widget::~Widget()
{
    delete ui;
}

我们再来尝试伙伴的设置。

image-20240508211100079
image-20240508211100079

注意，这里使用 &单字母 来生成伙伴的快捷键。

//widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H
//widget.cpp
#include "widget.h"
#include "ui_widget.h"

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

    ui->label_1->setBuddy(ui->radioButton_1);
    ui->label_2->setBuddy(ui->radioButton_2);
}

Widget::~Widget()
{
    delete ui;
}
image-20240508211129656
image-20240508211129656

使用快捷键或者鼠标就可以选择 lable。

3.2.QLCDNumber

QLCDNumer 创建的对象是一个专门用来显示数字的控件，效果类似于液晶屏上的数字。

属性作用
intValue显示的整数数字值
value显示的浮点数字值，和 intValue 是联动的（例如给 value 设为 1.5 则 intValue 的值就是 2）。另外，设置 value 和 intValue 的方法名字为 display()，而不是 setValue() 或者 setIntValue()
digitCount会显示几位数字
mode数字的显示形式，可以设置为 QLCDNumber::Dec(十进制)、 QLCDNumber::Hex(十六进制)、QLCDNumber::Bin(二进制)、QLCDNumber::Oct(八进制)，其中只有十进制的时候才能显示小数点后续的内容
segmentStyle设置显示风格，可以设置为：QLCDNumber::Flat(平面的显示风格)、QLCDNumber::Outline(轮廓显示风格)、QLCDNumber::Filled(填充显示风格)
smallDecimalPoint设置比较小的小数点
image-20240509000033522
image-20240509000033522

QProgressBar

QCalendarWidget

QLineEdit

QTextEdit

QComboBox

QSpinBox

QDateTimeEdit

QDial

QSlider

更新日志

2025/11/21 13:51
查看所有更新日志
  • 6fa6e-迁移所有有效的文章于
  • 6e6aa-项目大更新于
  • 39256-添加一些测试语法于
  • 7ef8c-添加一些文件，同时做好一些基础的加密防护于
  • 01111-保存所有的学习于
  • 7ffa6-学习使用 Sentinel、Sa-token、Nacos、ES于
  • 1a85c-临时迁移文件，开始部署博客于
  • b7955-修改资源目录于
  • 1d7f9-数据备份于
  • 9c3ea-数据备份于

版权归属：limou3434

许可证：署名 4.0 国际 (CC-BY-4.0)

本站公告

本网站正在不断升级中，若有 bug 可以在本开发者的对应项目下提交 issues。