Qt【第七篇】 ——— QSS 样式表与绘图 API 核心用法及 UI 定制功能总结

QSS

widget.cpp（QSS的基本使用）

widget.cpp（QSS选择器的用法）

widget.cpp（QSS子控件选择器）

widget.cpp（QSS伪类选择器）

widget.cpp（QSS盒子模型）

[QSS 基本格式与基础用法](#QSS 基本格式与基础用法)

[QSS 选择器分类及作用范围](#QSS 选择器分类及作用范围)

[QSS 子控件选择器](#QSS 子控件选择器)

[QSS 伪类选择器](#QSS 伪类选择器)

[QSS 盒子模型](#QSS 盒子模型)
绘图API的基本使用

widget.cpp（重写paintEvent事件函数）

widget.cpp（画笔的使用）

widget.cpp（画刷的使用）

[paintEvent 绘图事件函数](#paintEvent 绘图事件函数)

[QPainter 画家类](#QPainter 画家类)

[QPen 画笔类](#QPen 画笔类)

[QBrush 画刷类](#QBrush 画刷类)

QSS

复制代码

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

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

    // ==================== Qt 样式表 QSS 基础用法 ====================
    // QSS (Qt Style Sheets)：Qt 提供的界面美化工具，语法和 CSS 几乎一致
    // 格式：控件类型 { 样式属性: 属性值; }

    // 1. 为 第一个按钮 (pushButton) 设置样式
    // 选择器：QPushButton → 仅对当前按钮生效
    // 样式：color: red; → 设置按钮**文字颜色为红色**（英文颜色名）
    ui->pushButton->setStyleSheet("QPushButton { color: red; }");

    // 2. 为 第二个按钮 (pushButton_2) 设置样式
    // color: #ffaa00; → 设置文字颜色为**橙黄色**（十六进制颜色码，通用网页颜色格式）
    ui->pushButton_2->setStyleSheet("QPushButton { color: #ffaa00; }");

    // 3. 为**整个窗口**设置全局样式
    // 选择器：QLineEdit → 窗口内所有的输入框都生效
    // 样式：文字颜色为绿色
    this->setStyleSheet("QLineEdit { color: green; }");
}

Widget::~Widget()
{
    // 释放 UI 资源
    delete ui;
}

复制代码

#include "widget.h"
// Qt应用程序核心类，管理应用程序生命周期
#include <QApplication>

int main(int argc, char *argv[])
{
    // 1. 创建Qt应用程序对象（必须第一个创建）
    QApplication a(argc, argv);

    // ==================== 全局 QSS 样式表设置 ====================
    // 给 QApplication 设置样式表 = 【整个应用全局生效】
    // 注意：多次调用 setStyleSheet，**后面的会完全覆盖前面的**！

    // 1. 类型选择器：匹配所有 QPushButton 按钮控件
    // 作用：所有按钮文字颜色=绿色
    a.setStyleSheet("QPushButton { color: green; } ");

    // 2. 类型选择器：匹配所有 Widget 窗口类
    // 作用：Widget 窗口内文字颜色=绿色（覆盖上一行）
    a.setStyleSheet("Widget { color: green; } ");

    // 3. 类选择器（带点 .）：匹配 Widget 类及其子类
    // 作用：范围更广，覆盖上一行
    a.setStyleSheet(".Widget { color: green; } ");

    // 4. 对象名选择器（#id）：精准匹配【对象名为 pushButton_2】的控件
    // 作用：仅该按钮文字=蓝色，字体大小=70px（覆盖上一行）
    a.setStyleSheet("#pushButton_2 { color: blue; font-size: 70px; } ");

    // 5. 分组选择器：同时为多个控件设置相同样式
    // 作用：所有 QPushButton + 所有 QLineEdit 文字=绿色（最终生效的样式）
    a.setStyleSheet("QPushButton, QLineEdit {color: green} ");


    // 创建主窗口对象
    Widget w;
    // 显示窗口
    w.show();

    // 启动Qt事件循环，程序运行
    return a.exec();
}

复制代码

#include "widget.h"
// Qt应用程序核心类，负责程序启动、事件循环、全局样式管理
#include <QApplication>

int main(int argc, char *argv[])
{
    // 创建Qt应用程序对象（程序入口必须）
    QApplication a(argc, argv);

    // ==================== 定义QSS样式字符串 ====================
    // 1. QComboBox::down-arrow：QSS 子控件选择器
    //    :: 代表选中 QComboBox 的【下拉箭头子控件】
    // 2. image: url(:/down.png);：设置箭头的显示图片
    //    :/ 开头 = Qt 资源文件路径（必须将图片添加到 qrc 资源文件中）
    QString style = "QComboBox::down-arrow { image: url(:/down.png); } ";

    // 为【整个应用】设置全局样式表
    // 所有界面中的 QComboBox 下拉箭头都会被替换为自定义图片
    a.setStyleSheet(style);

    // 创建主窗口并显示
    Widget w;
    w.show();

    // 启动Qt事件循环，程序运行
    return a.exec();
}

复制代码

#include "widget.h"
// Qt应用程序核心类，管理全局样式、程序生命周期
#include <QApplication>

int main(int argc, char *argv[])
{
    // 创建Qt应用程序对象（程序入口必备）
    QApplication a(argc, argv);

    // ==================== 拼接全局QSS样式表 ====================
    // 1. 定义基础样式：QPushButton 默认状态 文字红色
    QString style = "QPushButton { color: red; } ";
    // 2. 拼接悬浮样式：:hover 伪状态 → 鼠标悬浮在按钮上时，文字绿色
    style += "QPushButton:hover { color: green; } ";
    // 3. 拼接按下样式：:pressed 伪状态 → 鼠标按下按钮时，文字蓝色
    style += "QPushButton:pressed {color: blue; } ";

    // 为整个应用设置**全局样式表**
    // 程序中所有的 QPushButton 按钮都会生效这三种样式
    a.setStyleSheet(style);

    // 创建主窗口并显示
    Widget w;
    w.show();

    // 启动Qt事件循环，程序保持运行
    return a.exec();
}

复制代码

#include "widget.h"
// Qt应用程序核心类，用于设置全局样式、管理程序运行
#include <QApplication>

int main(int argc, char *argv[])
{
    // 创建Qt应用程序对象（程序入口必须）
    QApplication a(argc, argv);

    // ==================== QSS 边框 + 内边距样式 ====================
    // 1. border: 10px solid green;
    //    边框复合属性，一次性设置三个参数：
    //    10px    → 边框宽度（粗细）
    //    solid   → 边框样式（实线），可替换为 dashed（虚线）
    //    green   → 边框颜色
    // 2. padding-left: 30px;
    //    左内边距：标签内部的文字/内容 距离 左边框的距离为30像素
    //    padding（内边距）可替换为 margin（外边距：控件与外部控件的距离）
    QString style = "QLabel { border: 10px solid green; padding-left: 30px; } ";  

    // 为整个应用设置全局样式，所有QLabel标签都会应用该样式
    a.setStyleSheet(style);

    // 创建主窗口并显示
    Widget w;
    w.show();

    // 启动Qt事件循环，程序运行
    return a.exec();
}

QSS 基本格式与基础用法

QSS 基本格式 ：固定语法为 选择器 {属性名：属性值；} ，与 CSS 语法高度兼容，是 Qt 界面美化的核心规则。单个控件样式设置 ：调用控件自身的 setStyleSheet 方法，样式仅对当前控件生效。

复制代码

// 仅对 pushButton 按钮生效，文字颜色为红色
ui->pushButton->setStyleSheet("QPushButton { color: red; }");

窗口级样式设置 ：调用窗口对象的 setStyleSheet 方法，样式对当前窗口内所有匹配的子控件全局生效。

复制代码

// 当前窗口中所有 QLineEdit 输入框，文字颜色均为绿色
this->setStyleSheet("QLineEdit { color: green; }");

QSS 选择器分类及作用范围

QApplication 级样式设置 ：调用 a.setStyleSheet 方法，样式对整个应用程序内所有控件生效 ，后续设置会覆盖之前的样式。类型选择器：匹配指定类型的所有控件，直接使用控件类名。

复制代码

// 应用内所有 QPushButton 按钮文字为绿色
a.setStyleSheet("QPushButton { color: green; }");

类选择器 ：以 . 开头，匹配指定类及其所有子类控件。

复制代码

// 匹配 Widget 类及其子类控件，文字为绿色
a.setStyleSheet(".Widget { color: green; }");

对象名选择器 ：以 # 开头，精准匹配指定 objectName 的单个控件。

复制代码

// 仅匹配对象名为 pushButton_2 的控件，文字为蓝色、字号70px
a.setStyleSheet("#pushButton_2 { color: blue; font-size: 70px; }");

分组选择器 ：多个选择器用 , 分隔，为不同控件设置相同样式。

复制代码

// 应用内所有 QPushButton 和 QLineEdit 文字为绿色
a.setStyleSheet("QPushButton, QLineEdit {color: green} ");

QSS 子控件选择器

子控件选择器语法 ：使用 :: 标识，用于选中复合控件的内部子元素，实现精细化样式定制。适用场景：修改下拉框箭头、滚动条滑块、输入框图标等内置子控件样式。

复制代码

// 选中 QComboBox 的下拉箭头子控件，替换为自定义图片
QString style = "QComboBox::down-arrow { image: url(:/down.png); } ";
a.setStyleSheet(style);

QSS 伪类选择器

伪类选择器语法 ：使用 : 标识，匹配控件的交互状态 ，实现动态样式切换。常用伪类：

:hover：鼠标悬浮在控件上时生效
:pressed：鼠标按下控件时生效

// 按钮默认文字红色，悬浮绿色，按下蓝色
QString style = "QPushButton { color: red; } ";
style += "QPushButton:hover { color: green; } ";
style += "QPushButton:pressed {color: blue; } ";
a.setStyleSheet(style);

QSS 盒子模型

盒子模型核心属性 ：用于控制控件的边框、内边距、外边距 ，规范控件的布局与间距。border ：设置控件边框，统一配置宽度、样式、颜色。padding ：内边距 ，控件内容与边框之间的距离。margin ：外边距，控件边框与外部其他控件之间的距离。

复制代码

// QLabel 边框：10px 实线绿色；左内边距30px
QString style = "QLabel { border: 10px solid green; padding-left: 30px; } ";  
a.setStyleSheet(style);

绘图API的基本使用

复制代码

#include "widget.h"
#include "ui_widget.h"
// Qt 绘图核心类：画家类，负责绘制所有图形
#include <QPainter>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    // 初始化UI界面
    ui->setupUi(this);
}

Widget::~Widget()
{
    // 释放UI资源
    delete ui;
}

// ==================== 重写 绘图事件函数 ====================
// 作用：窗口需要显示/刷新时，自动调用该函数
// 所有自定义绘图代码，都必须写在这个函数里
void Widget::paintEvent(QPaintEvent *event)
{
    // 忽略未使用的 event 参数，避免编译器警告
    (void)event;

    // ==================== 1. 创建画家对象 ====================
    // QPainter：Qt 绘图核心工具
    // 参数 this：指定绘图设备为【当前窗口】，所有图形都画在本窗口上
    QPainter painter(this);

    // ==================== 2. 绘制直线 ====================
    // drawLine(x1, y1, x2, y2)
    // (x1,y1)：直线起点坐标  (x2,y2)：直线终点坐标
    // 坐标原点：窗口左上角
    painter.drawLine(20, 20, 200, 20);   // 水平直线
    painter.drawLine(20, 20, 100, 300); // 斜直线

    // ==================== 3. 绘制矩形 ====================
    // drawRect(x, y, width, height)
    // (x,y)：矩形左上角坐标
    // width：矩形宽度  height：矩形高度
    painter.drawRect(100, 100, 300, 300);

    // ==================== 4. 绘制椭圆 ====================
    // drawEllipse(x, y, width, height)
    // 椭圆的外接矩形：以 (x,y) 为左上角，宽width、高height 的矩形
    // 矩形内切椭圆 = 最终绘制的椭圆
    // 宽=高 → 圆形；宽≠高 → 椭圆
    painter.drawEllipse(200, 200, 200, 50);
}

复制代码

#include "widget.h"
#include "ui_widget.h"
// Qt绘图核心类：画家类
#include <QPainter>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    // 初始化UI界面
    ui->setupUi(this);
}

Widget::~Widget()
{
    // 释放UI资源
    delete ui;
}

// ==================== 重写绘图事件：所有绘图逻辑必须写在这里 ====================
// 窗口刷新、显示时自动调用该函数
void Widget::paintEvent(QPaintEvent *event)
{
    // 忽略未使用的参数，消除编译器警告
    (void)event;

    // 1. 创建画家对象，指定在当前窗口(this)上绘图
    QPainter painter(this);

    // ==================== 2. 创建并自定义画笔 QPen ====================
    // QPen：画笔，负责控制**线条的颜色、粗细、样式**
    QPen pen;
    // 设置画笔颜色：RGB(255,0,0) → 纯红色
    pen.setColor(QColor(255, 0, 0));
    // 设置画笔宽度：5 像素（线条粗细）
    pen.setWidth(5);
    // 设置画笔线条样式：Qt::DashLine → 虚线
    // 可选：SolidLine(实线)、DotLine(点线)、DashDotLine(点划线)等
    pen.setStyle(Qt::DashLine);

    // 3. 将自定义的画笔交给画家，画家使用该画笔绘制图形
    painter.setPen(pen);

    // ==================== 4. 绘制椭圆 ====================
    // drawEllipse(x, y, width, height)
    // 椭圆的外接矩形：左上角(200,200)，宽200，高50
    painter.drawEllipse(200, 200, 200, 50);
}

复制代码

#include "widget.h"
#include "ui_widget.h"
// Qt绘图核心类：画家类，负责绘制图形
#include <QPainter>

Widget::Widget(QWidget parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    // 初始化UI界面
    ui->setupUi(this);
}

Widget::~Widget()
{
    // 释放UI资源
    delete ui;
}

// ==================== 重写绘图事件 ====================
// 窗口绘制/刷新时自动调用，所有绘图逻辑必须写在此函数中
void Widget::paintEvent(QPaintEvent *event)
{
    // 忽略未使用的事件参数，消除编译器警告
    (void)event;

    // 1. 创建画家对象，指定绘图设备为当前窗口
    QPainter painter(this);

    // ==================== 2. 创建并自定义画刷 QBrush ====================
    // QBrush：画刷，专门用于填充【矩形、椭圆等封闭图形】的内部区域
    QBrush brush;
    // 设置画刷颜色：RGB(0,255,0) → 纯绿色
    brush.setColor(QColor(0, 255, 0));
    // 设置画刷填充样式：Qt::SolidPattern → 实心填充（最常用）
    brush.setStyle(Qt::SolidPattern);

    // 3. 将自定义画刷交给画家，画家使用该画刷填充图形
    painter.setBrush(brush);

    // ==================== 4. 绘制椭圆（自动填充内部） ====================
    // 椭圆是封闭图形，会自动使用画刷填充内部
    // 参数：左上角x、左上角y、宽度、高度
    painter.drawEllipse(200, 200, 200, 50);
}

paintEvent 绘图事件函数

核心作用 ：Qt 提供的绘图事件虚函数 ，窗口显示、刷新、缩放、移动时自动触发，所有自定义绘图逻辑必须编写在该函数内部。函数特性：属于 QWidget 的内置虚函数，自定义窗口类需重写实现绘图功能。

复制代码

// 重写绘图事件函数
void Widget::paintEvent(QPaintEvent *event)
{
    (void)event; // 忽略未使用参数，消除编译器警告
    // 所有绘图代码
}

QPainter 画家类

核心定义 ：Qt 绘图核心工具类，统一执行图形绘制操作，构造时指定绘图设备 （当前窗口）。构造方式 ：QPainter painter(this)，this表示绘图目标为当前窗口，坐标原点为窗口左上角 。核心绘制函数及参数 drawLine ：绘制直线，参数为x1,y1（起点坐标）、x2,y2（终点坐标）。

复制代码

painter.drawLine(20, 20, 200, 20);

drawRect ：绘制矩形，参数为x,y（左上角坐标）、width（宽度）、height（高度）。

复制代码

painter.drawRect(100, 100, 300, 300);

drawEllipse ：绘制椭圆 / 圆形，参数为外接矩形的x,y、宽度、高度，宽高相等时为圆形。

复制代码

painter.drawEllipse(200, 200, 200, 50);

QPen 画笔类

核心定义 ：用于设置图形边框线条 的样式，控制线条的颜色、粗细、线型 ，仅作用于图形轮廓。核心成员函数 setColor ：设置画笔颜色，支持QColor(R,G,B)格式赋值。setWidth ：设置画笔宽度，单位为像素，数值越大线条越粗。setStyle ：设置线条样式，可选Qt::SolidLine（实线）、Qt::DashLine（虚线）等。setPen：将自定义画笔绑定到画家对象，生效绘图样式。

复制代码

QPen pen;
pen.setColor(QColor(255, 0, 0)); // 设置红色
pen.setWidth(5); // 设置线条宽度5像素
pen.setStyle(Qt::DashLine); // 设置虚线样式
painter.setPen(pen); // 绑定画笔

QBrush 画刷类

核心定义 ：用于封闭图形内部填充 ，控制填充区域的颜色、填充样式 ，仅作用于矩形、椭圆等封闭图形的内部。核心成员函数 setColor ：设置画刷填充颜色。setStyle ：设置填充样式，Qt::SolidPattern为实心填充 （最常用）。setBrush：将自定义画刷绑定到画家对象，生效填充效果。

复制代码

QBrush brush;
brush.setColor(QColor(0, 255, 0)); // 设置绿色填充
brush.setStyle(Qt::SolidPattern); // 设置实心填充
painter.setBrush(brush); // 绑定画刷

Qt【第七篇】 ——— QSS 样式表与绘图 API 核心用法及 UI 定制功能总结

目录

QSS

widget.cpp（QSS的基本使用）

widget.cpp（QSS选择器的用法）

widget.cpp（QSS子控件选择器）

widget.cpp（QSS伪类选择器）

widget.cpp（QSS盒子模型）

QSS 基本格式与基础用法

QSS 选择器分类及作用范围

QSS 子控件选择器

QSS 伪类选择器

QSS 盒子模型

绘图API的基本使用

widget.cpp（重写paintEvent事件函数）

widget.cpp（画笔的使用）

widget.cpp（画刷的使用）

paintEvent 绘图事件函数

QPainter 画家类

QPen 画笔类

QBrush 画刷类