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);

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