网站导航
> 技术文档 > Qt 常用控件 - 4

Qt 常用控件 - 4

网友: 技术文档 2025-08-08 06:37:24

Qt 常用控件 - 3https://blog.csdn.net/Small_entreprene/article/details/149665911

关于 CSS 和 Qt Style Sheet (QSS)

  • CSS (Cascading Style Sheets 层叠样式表) 是网页前端技术，用于描述界面的样式，包括大小、位置、颜色、间距、字体、背景、边框等。丰富多彩的网页都大量使用了 CSS。

  • Qt 虽然是用于 GUI 开发的，但与网页前端有许多相似之处，因此也引入了对 CSS 的支持，称为 Qt Style Sheet (QSS)。不过，Qt 只能支持 CSS 中的一部分属性，具体支持情况可以参考 Qt 文档中的 \"Qt Style Sheets Reference\" 章节。

示例：设置文本样式

  1. 在界面上创建一个 label。

  2. 编辑右侧的 styleSheet 属性，设置样式。语法格式与 CSS 相同，使用键值对的方式设置样式，键和值之间用 : 分割，键值对之间用 ; 分割。Qt Designer 只能对样式的基本格式进行校验，不能检测出哪些样式不被 Qt 支持。例如，text-align: center 这样的文本居中操作就不被支持。我们也可以鼠标右键指定控件，会有 --- 改变样式表。

  3. 编辑完成后，可以在 Qt Designer 中实时预览效果。运行程序后，实际效果和预览效果基本一致。

示例：实现切换夜间模式

  1. 在界面上创建一个多行输入框 (Text Edit) 或者 Plain Text Edit 和两个按钮，objectName 分别为 pushButton_light 和 pushButton_dark。

  2. 编写按钮的 slot 函数。使用颜色代码（如 #333 表示深色但不是纯黑，#fff 表示纯白，#000 表示纯黑）来设置背景和文字颜色。可以使用在线调色板工具查看颜色代码，参考 在线调色板。

  3. 运行程序后，点击 \"日间模式\" 和 \"夜间模式\" 按钮，可以看到界面在浅色背景深色文字和深色背景浅色文字之间切换。

#include \"widget.h\"#include \"ui_widget.h\"Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget){ ui->setupUi(this);}Widget::~Widget(){ delete ui;}void Widget::on_pushButton_light_clicked(){ //背景色为亮色 //文本色为暗色 //设置样式 this->setStyleSheet(\"background-color: white\"); //设置输入框样式 ui->plainTextEdit->setStyleSheet(\"background-color: white; color: black\"); //设置按钮样式 ui->pushButton_light->setStyleSheet(\"color: black\"); ui->pushButton_dark->setStyleSheet(\"color: black\");}void Widget::on_pushButton_dark_clicked(){ //背景色为亮色 //文本色为暗色 //设置样式 this->setStyleSheet(\"background-color: black\"); //设置输入框样式 ui->plainTextEdit->setStyleSheet(\"background-color: balck; color: white\"); //设置按钮样式 ui->pushButton_light->setStyleSheet(\"color: white\"); ui->pushButton_dark->setStyleSheet(\"color: white\");}

可是我们执行程序的最开始的界面是：

CSS/QSS 中是可以直接使用单词来设置颜色的：white/black/red/green/blue/yellow/...

颜色是无数种的，我们尽量使用颜色代码来进行代码的设置！

void Widget::on_pushButton_light_clicked(){ //背景色为亮色 //文本色为暗色 //设置样式 this->setStyleSheet(\"background-color: #6666FF\"); //设置输入框样式 ui->plainTextEdit->setStyleSheet(\"background-color: #CCFFFF; color: #000000\"); //设置按钮样式 ui->pushButton_light->setStyleSheet(\"color: #000000\"); ui->pushButton_dark->setStyleSheet(\"color: #000000\");}void Widget::on_pushButton_dark_clicked(){ //背景色为亮色 //文本色为暗色 //设置样式 this->setStyleSheet(\"background-color: ##0066FF\"); //设置输入框样式 ui->plainTextEdit->setStyleSheet(\"background-color: #000099; color: #FFFFFF\"); //设置按钮样式 ui->pushButton_light->setStyleSheet(\"color: #FFFFFF\"); ui->pushButton_dark->setStyleSheet(\"color: #FFFFFF\");}

 

关于计算机中的颜色表示

计算机中使用 \"像素\" 表示屏幕上的一个基本单位（一个发亮的光点）。每个像素使用三个字节表示颜色，分别是 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 色深等，情况会更加复杂。

前面部分就是 QWidget 的重要属性了，接下来，我们针对特定的某种控件进行更加丰富的学习和使用。

之前 QWidget 中涉及到的各种属性/函数/使用方法，针对接下来的要介绍的 Qt 的各种控件都是有效的！

按钮类控件

QPushButton

QPushButton 表示一个按钮，继承自 QAbstractButton，后者是一个抽象类，是其他按钮的父类。在 Qt Designer 中也可以看到这种继承关系。QAbstractButton 中与 QPushButton 相关性较大的属性如下：

属性 说明 text 按钮中的文本 icon 按钮中的图标 iconSize 按钮中图标的尺寸 shortCut 按钮对应的快捷键 --- 按下快捷键==点击按钮，触发事件，参数是 QKeySequence，是一个类，sequence 是顺序表，说明按下的快捷键，不一定是单个按键，也可以是组合键 autoRepeat 按钮是否会重复触发。当鼠标左键按住不放时，如果设为 true，则会持续产生鼠标点击事件；如果设为 false，则必须释放鼠标，再次按下鼠标时才能产生点击事件 autoRepeatDelay 重复触发的延时时间。按住按钮多久之后，开始重复触发 autoRepeatInterval 重复触发的周期

  • QAbstractButton 作为 QWidget 的子类，继承了 QWidget 的属性，因此上述介绍的 QWidget 的各种属性用法，对于 QAbstractButton 同样适用。表格仅列出 QAbstractButton 独有的属性。

  • Qt 的 API 设计风格非常清晰，此处列出的属性都可以获取和设置。例如，使用 text() 获取按钮文本；使用 setText() 设置文本。事实上，QPushButton 的核心功能都是 QAbstractButton 提供的，自身提供的属性都比较简单。其中 default 和 autoDefault 影响的是按下 enter 时自动点击哪个按钮的行为；flat 把按钮设置为扁平的样式。这里暂时不做过多关注。

示例：带有图标的按钮

图标：

  1. 创建 resource.qrc 文件，并导入图片。具体操作步骤参见 QWidget 中的 windowIcon 部分。

  2. 在界面上创建一个按钮。

  3. 修改 widget.cpp，给按钮设置图标。

Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget){ ui->setupUi(this); // 创建图标对象 QIcon icon(\":/dog.png\"); // 设置图标 ui->pushButton->setIcon(icon); // 设置图标尺寸 --- 可选 ui->pushButton->setIconSize(QSize(50, 50));}

示例：带有快捷键的按钮

  1. 在界面上拖五个按钮，objectName 分别为 pushButton_target、pushButton_up、pushButton_down、pushButton_left、pushButton_right。五个按钮的初始位置随意，其中 pushButton_target 尺寸设置为 100×100，其余按钮设为 50×50，文本内容均清空。

  2. 创建 resource.qrc，并导入 5 个图片。像这样的图片资源，可以在 阿里巴巴矢量图标库 中查找并免费下载。包含上面的dog（还有类似下面的图标）

  3. 修改 widget.cpp，设置图标资源和快捷键。

初始化操作：设置按钮图标 

Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget){ ui->setupUi(this); // 设置这些按钮的图标 --- 使用匿名函数 ui->pushButton_target->setIcon(QIcon(\":image/dog.png\")); ui->pushButton_target->setIconSize(QSize(80, 80)); ui->pushButton_up->setIcon(QIcon(\":image/up.png\")); ui->pushButton_up->setIconSize(QSize(50, 50)); ui->pushButton_down->setIcon(QIcon(\":image/down.png\")); ui->pushButton_down->setIconSize(QSize(50, 50)); ui->pushButton_left->setIcon(QIcon(\":image/left.png\")); ui->pushButton_left->setIconSize(QSize(50, 50)); ui->pushButton_right->setIcon(QIcon(\":image/right.png\")); ui->pushButton_right->setIconSize(QSize(50, 50)); // // 设置对应的快捷键 // ui->pushButton_up->setShortcut(QKeySequence(\"w\")); // ui->pushButton_down->setShortcut(QKeySequence(\"s\")); // ui->pushButton_left->setShortcut(QKeySequence(\"a\")); // ui->pushButton_right->setShortcut(QKeySequence(\"d\")); //也可以这么写 ui->pushButton_up->setShortcut(QKeySequence(Qt::CTRL + Qt::Key_W)); //ui->pushButton_up->setShortcut(QKeySequence(Qt::Key_W)); ui->pushButton_down->setShortcut(QKeySequence(Qt::Key_S)); ui->pushButton_left->setShortcut(QKeySequence(Qt::Key_A)); ui->pushButton_right->setShortcut(QKeySequence(Qt::Key_D));}

修改 widget.cpp，设置四个方向键的 slot 函数。

void Widget::on_pushButton_up_clicked(){ // 获取到 target 的位置 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(){ // 获取到 target 的位置 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(){ // 获取到 target 的位置 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(){ // 获取到 target 的位置 QRect rect = ui->pushButton_target->geometry(); // 基于上次的位置，设置新的位置 ui->pushButton_target->setGeometry(rect.x() + 5, rect.y(), rect.width(), rect.height());}

运行程序，此时点击按钮，或者使用 wasd 均可让目标按钮移动。

示例：按钮的重复触发

在上述案例中，按住快捷键是可以进行重复触发的，但鼠标点击则不能。修改 widget.cpp，在构造函数中开启重复触发。

// 开启重复触发ui->pushButton_up->setAutoRepeat(true);ui->pushButton_down->setAutoRepeat(true);ui->pushButton_left->setAutoRepeat(true);ui->pushButton_right->setAutoRepeat(true);

此时，按住鼠标时，即可让目标按钮连续移动。

网络标签：

相关问题