当前位置：首页 > news >正文

『 QT 』QT QWidget 控件属性全解析 (三)

news 2025/11/4 11:01:24

文章目录

- 1 styleSheet 属性
- - 1.1 通过 QTDesigner 设置 styleSheet 属性
  - 1.2 通过代码设置 styleSheet 属性
  - - 1.2.1 通过代码实现客户端切换日/夜间模式
- 2 补充

1 styleSheet 属性

styleSheet 属性为通过类似于CSS样式(QSS)来设置widget的样式;

QSS

CSS本身属于前端技术, 用于表述界面的样式;

QT引入了类似于CSS的样式并改称为QSS, 即Qt Style Sheet;

QT所支持的QSS样式并不像CSS的样式足够丰富, 具体可以参考Qt文档中的Qt Style Sheets Reference;

1.1 通过 QTDesigner 设置 styleSheet 属性

通常情况下, QT 支持在 QtDesigner 中直接对样式进行静态调整;

打开 QtDesigner 并创建一个 Label 控件;

点击控件后在属性编辑器中存在一个styleSheet;

该属性即为该对象的styleSheet;

点击对应的输入框则可以使用Qss直接对控件的styleSheet属性进行编辑(也可点击右侧唤起输入弹窗);

通常情况下, QT中的QSS与Html中的CSS类似, 采用Key-Value的方式进行设置;

此处使用的是下列样式;

clogr: white;
background-color: green;
font-size: 20px;
font-family: 华文楷体;
font-weight: bold;
font-style: italic;
text-decoration:underline;
text-decoration:line-through;

当属性进行编辑修改后可以直接在QtDesigner中看到所修改的效果;

这是一种静态的修改方式, 除了通过使用QtDesigner对控件的styleSheet的静态修改方式;

除此之外同样可以使用代码的方式, 通过槽与信号的方式对控件的样式进行动态的更改;

1.2 通过代码设置 styleSheet 属性

用代码设置对应的styleSheet属性通常使用setStyleSheet()函数对一个控件的属性进行设置;

假设存在一个QPushButton按钮, 其objectName为PushButton;

在Widget的构造函数中设置该PushButton的styleSheet属性;

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet("color: white;background-color: green;font-family: 华文新魏;font-size: 20px");
}

最终的运行结果为:

随着构造函数的执行, 对应的控件styleSheet属性被修改, 样式发生改变;

需要注意的是, 当多次对控件进行setStyleSheet()设置属性时, 只有最后一次会生效, 这意味着这是一个重复覆盖的操作;

假设对代码进行修改;

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet("color: white;background-color: green;font-family: 华文新魏;font-size: 20px");ui->pushButton->setStyleSheet("");
}

那么对应的运行结果为:

上一次的setStyleSheet()被覆盖;

1.2.1 通过代码实现客户端切换日/夜间模式

实现一个小功能:

这种动态的变化我们使用信号与槽的方式进行实现;

首先在Widget中存在以下控件:

textEdit 可编辑文本框
PushButton 按钮

其中两个控件的objectName为默认, 此处不进行修改;

随后在Widget.h/Widget.cpp文件中声明并定义所需的功能函数:

toDayMode() - 切换为日间模式

/* Widget.cpp */void Widget::toDayMode()
{ui->textEdit->setStyleSheet("background-color: #FFFFFF;""color: black;""font-family: 华文楷体;""font-size: 20px");this->setStyleSheet("background-color: #EcEaEa;");ui->pushButton->setStyleSheet("background-color: #FFFFFF;""font-size: 15px;""font-family: 华文仿宋;""color: black""font-weight: bold;");ui->pushButton->setText("切换至夜间模式");
}

toNightMode() - 切换为夜间模式

/* Widget.cpp */void Widget::toNightMode()
{ui->textEdit->setStyleSheet("background-color: #2D2D2D;""color: white;""font-family: 华文楷体;""font-size: 20px");this->setStyleSheet("background-color: #1E1E1E;");ui->pushButton->setStyleSheet("background-color: #3C3C3C;""font-size: 15px;""font-family: 华文仿宋;""color: black;""font-weight: bold;");ui->pushButton->setText("切换至日间模式");
}

当设置为夜间模式时, 对应的样式将会改变, 包括PushButton中的文字也会进行改变, 设置为日间模式也是如此;

将设置样式单独封装为一个函数可增加代码的复用性;

接下来需要设置默认的样式, 我们可以通过服用上述封装的两个函数选择其一作为默认样式;

此处调用日间模式作为默认的模式;

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 设置默认样式toDayMode();
}

当运行程序后对应的效果为:

接下来需要设置pushButton的槽函数;

由于已经设置了切换至日/夜间模式的函数, 因此槽函数只需要判断当前pushButton.text()中的文字内容从而对样式进行切换即可;

void Widget::on_pushButton_clicked()
{QString str="切换至夜间模式";if(ui->pushButton->text() == str)Widget::toNightMode();else Widget::toDayMode();
}

最终运行结果为:

2 补充

颜色相关

在使用QSS进行对应的颜色设置时可以使用一些具体颜色的英语单词来进行设置, 如white, blue, green, …;

除此之外可以使用光学中三原色(红绿蓝, 即RGB)的代码, # XX XX XX其中每个XX为一组表示一个十六进制数, 其中第一组为R - red, 第二组为B - blue, 第三组则为G - green, 如#FFFFFF即为纯白;

除此之外, 若是需要参考某些客户端中的具体颜色, 可以使用某些第三方工具(如QQ, WeChat等)中的取色器功能来获取对应位置的色值(颜色代码);

其次在进行颜色的设置时还可以采用下列的方式来进行颜色的设置:
```
ui->pushButton->setStyleSheet("color: rgb(240, 240, 240)");
```
在rgb()中的从左至右分别为红, 绿, 蓝, 即RGB;
样式编写相关

在进行QSS对styleSheet进行编写时需要注意, 当格式正确但单词拼写错误的情况下, QtCreator通常不会进行报错, 但实际在运行过程中对应的样式将会不生效(不存在样式代码审查);

其次是在进行样式的编写时难免会对对应的样式没有印象, 通常情况下我们可以选择查看文档, 如可以使用Qt Assistant查看Qt Style Sheet部分相关文档;