【Qt】界面优化-优快云博客

本文链接：https://blog.youkuaiyun.com/GG_Bruse/article/details/137648167

本文详细介绍了Qt框架中QSS样式表的语法、设置方法，包括指定控件、全局样式、从文件加载样式、选择器（包括类型、ID、子控件和伪类选择器）、样式属性（盒模型）以及登录界面的样式示例。此外，还涵盖了Qt中的绘图基础、绘制形状、画笔和画刷设置，以及特殊绘图设备QPixmap、QImage和QPicture的使用和特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.2.4 使用Qt Designer编辑样式

一、QSS

1.1 基本语法

选择器 {
    属性名: 属性值;
}

选择器：描述了"哪个widget要应用样式规则"
属性：是一个键值对，属性名表示要设置哪种样式，属性值表示了设置的样式的值

QPushButton {
    color: red;
}

注意：若通过 QSS 设置的样式和通过 C++ 代码设置的样式冲突，则QSS优先级更高

1.2 QSS设置方法

1.2.1 指定控件样式设置

QWidget 中包含了 setStyleSheet 方法，可以直接设置样式。给指定控件设置样式之后，该控件的子元素也会受到影响

代码示例：子控件受影响

在界面上创建一个按钮

修改widget.cpp，不给按钮设置样式，而是给 Widget 设置样式(Widget是QPushButton的父控件)

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setStyleSheet("QPushButton { color:red }");
}

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

运行程序，可以看到样式对于子控件按钮同样会生效

1.2.2 全局样式设置

可以通过 QApplication 的 setStyleSheet 方法设置整个程序的全局样式

全局样式优点：

使同一个样式针对多个控件生效，代码更简洁
所有控件样式内聚在一起，便于维护和问题排查

代码示例：使用全局样式

在界面上创建三个按钮

编辑main.cpp，设置全局样式

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("QPushButton { color:red; }");

    Widget w;
    w.show();
    return a.exec();
}

此时三个按钮的颜色都设置为红色了

代码示例：样式的层叠性

若通过全局样式给某个控件设置了属性1，通过指定控件样式给控件设置属性2，那么这两个属性都会产生作用

在上一个示例代码的基础上，编写widget.cpp，给第一个按钮设置字体大小

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->pushButton->setStyleSheet("QPushButton { font-size:30px; }");
}

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

运行程序可以看到，对于第一个按钮而言，同时具备了颜色和字体大小样式，而第二、三个按钮只有颜色样式，说明针对第一个按钮，两种设置方式设置的样式叠加了

代码示例：样式的优先级

若全局样式和指定控件样式冲突，则指定控件样式优先展示

在上一个示例代码的基础上，编写widget.cpp，给第二个按钮设置绿色

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->pushButton->setStyleSheet("QPushButton { font-size:30px; }");
    ui->pushButton_2->setStyleSheet("QPushButton { color:green }");
}

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