Qt 入门简洁笔记：界面优化（QSS样式表与绘图系统）

---

一、QSS 样式表详解

1.1 QSS 背景介绍

在 Web 开发中，我们使用 CSS（Cascading Style Sheets） 来定义网页的外观与布局。同理，在 Qt 中也提供了类似的机制 —— QSS（Qt Style Sheets）。

QSS 用于控制 Qt 控件的视觉样式，如字体、颜色、边框、背景等，使程序拥有更专业、美观的界面。

与 CSS 不同的是：

• QSS 支持的属性相对较少；
• QSS 主要作用于控件样式，不负责布局；
• QSS 语法基本兼容 CSS，学习成本低。

优先级规则：

• 当通过代码与 QSS 同时设置样式时，QSS 优先级更高；
• 样式具有层叠性（Cascade），即局部样式可覆盖全局样式。

---

1.2 QSS 基本语法

基本结构如下：

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

例如：

QPushButton { color: red; }

代表所有 QPushButton 文本颜色为红色。

QSS 可以通过两种方式设置：

• 单行写法；
• 多行块状写法（推荐，可读性更好）。

---

1.3 QSS 设置方式

（1）指定控件样式

直接通过 setStyleSheet() 设置：

ui->pushButton->setStyleSheet("QPushButton { color: red; }");

仅对当前控件生效。

（2）全局样式

可以通过 QApplication 设置全局样式，影响整个程序：

a.setStyleSheet("QPushButton { color: red; }");

优点：

• 统一管理样式；
• 便于维护与扩展。

（3）从文件加载样式

推荐把样式单独放到 .qss 文件中，通过文件读取方式加载：

QString loadQSS() {QFile file(":/style.qss");file.open(QFile::ReadOnly);QString style = file.readAll();file.close();return style;
}int main(int argc, char *argv[]) {QApplication a(argc, argv);a.setStyleSheet(loadQSS());...
}

这种方式更专业，便于分离逻辑与样式。

（4）在 Qt Designer 中编辑样式

Qt Designer 支持图形化编辑样式，可右键控件 → “更改样式表”。
这样修改的内容会写入 .ui 文件中，属于 XML 格式记录。

---

1.4 QSS 选择器

QSS 支持多种选择器，以下为常用类型：

类型	示例	说明
全局选择器	*	选择所有控件
类型选择器	QPushButton	选择指定类型及其子类控件
类选择器	.QPushButton	选择特定类，不包含子类
ID选择器	#pushButton_2	根据 objectName 选择
后代选择器	QDialog QPushButton	选择所有子控件中的按钮
子选择器	QDialog > QPushButton	仅选择直接子控件
并集选择器	QPushButton, QLabel	同时作用于多种控件
属性选择器	QPushButton[flat="false"]	匹配属性条件的控件

优先级规律：选择器越具体，优先级越高。通常 ID 最高。

---

1.5 子控件与伪类选择器

（1）子控件选择器（Sub-Controls）

用于选择控件内部组件。例如：

QComboBox::down-arrow {image: url(:/down.png);
}

表示设置下拉箭头图标。

（2）伪类选择器（Pseudo-States）

伪类根据控件状态改变样式：

伪类	含义
:hover	鼠标悬停
:pressed	鼠标按下
:focus	获取焦点
:checked	被选中
:enabled	可用状态

例如：

QPushButton { color: red; }
QPushButton:hover { color: green; }
QPushButton:pressed { color: blue; }

---

1.6 QSS 盒模型（Box Model）

盒模型由四部分组成：

┌──────────────┐
│  Margin      │ 外边距
│ ┌──────────┐ │
│ │  Border  │ │ 边框
│ │ ┌──────┐ │ │
│ │ │Padding│ │ │ 内边距
│ │ │Content│ │ │ 内容区
│ │ └──────┘ │ │
│ └──────────┘ │
└──────────────┘

常用属性：

margin: 10px;
padding: 5px;
border: 2px solid red;

---

1.7 常用控件样式示例

（1）按钮

QPushButton {font-size: 20px;border: 2px solid #8f8f91;border-radius: 15px;background-color: #dadbde;
}
QPushButton:pressed {background-color: #f6f7fa;
}

（2）复选框与单选框

利用伪类和 ::indicator 子控件可实现自定义选中图标。

（3）输入框

QLineEdit {border: 1px inset #3A3A3A;border-radius: 10px;color: white;background: rgb(100, 100, 100);
}

（4）列表项样式

QListView::item:hover {background: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 #FAFBFE, stop:1 #DCDEF1);
}

（5）菜单栏

通过 QMenuBar::item:selected 等伪类控制悬停、点击时样式。

---

1.8 QSS 登录界面实战

通过 QFrame 设置背景、QLineEdit 美化输入框、QPushButton 设置交互反馈等，实现一个完整登录界面。

核心 QSS：

QFrame { border-image: url(:/cat.jpg); }
QLineEdit {background-color: #405361;border-radius: 10px;color: #8d98a1;
}
QPushButton {background-color: #555;color: white;border-radius: 10px;
}

---

1.9 小结

• QSS 是 Qt 的界面美化基础；
• 支持层叠性与优先级机制；
• 可通过文件、代码或 Qt Designer 设置；
• 实际开发中建议将样式与逻辑分离，集中管理。

---

二、Qt 绘图系统（QPainter）

2.1 基本概念

Qt 提供了强大的绘图机制，核心类如下：

类	作用
QPainter	画家，负责绘制图形
QPaintDevice	画布，如 QWidget、QImage
QPen	画笔，控制线条样式
QBrush	画刷，控制填充样式

绘图操作一般放在 paintEvent() 函数中进行，以确保在窗口重绘时生效。

---

2.2 常见绘制操作

（1）绘制线段

void paintEvent(QPaintEvent*) override {QPainter p(this);p.drawLine(10, 10, 100, 100);
}

（2）绘制矩形

p.drawRect(50, 50, 100, 60);

（3）绘制圆形

p.drawEllipse(QPoint(100, 100), 50, 50);

（4）绘制文本

p.setFont(QFont("Microsoft YaHei", 16));
p.drawText(50, 50, "Hello Qt");

---

2.3 画笔与画刷

QPen pen(Qt::red);
pen.setWidth(3);
pen.setStyle(Qt::DashLine);
p.setPen(pen);QBrush brush(Qt::yellow, Qt::Dense4Pattern);
p.setBrush(brush);

---

2.4 图像绘制

Qt 提供 QPixmap、QImage、QBitmap、QPicture 四种图像设备。

• QPixmap：显示优化；
• QImage：可操作像素；
• QBitmap：黑白图；
• QPicture：记录绘图指令。

绘制图像：

p.drawPixmap(0, 0, QPixmap(":/cat.png"));

还可配合 translate()、scale()、rotate() 实现平移、缩放与旋转效果。

---

2.5 保存与恢复状态

p.save();
p.translate(100, 0);
p.drawEllipse(0, 0, 50, 50);
p.restore();  // 回到原状态

---

三、总结

• QSS 负责界面样式控制；
• QPainter 提供低层绘图支持；
• 两者结合，可打造高质量、个性化的界面。

---

参考资料

• Qt 官方文档：《Qt Style Sheets Reference》
• Qt Style Sheets Examples
• GitHub - GTRONICK/QSS

---

免责声明

本文仅供学习与参考使用。
作者不对因使用本文任何内容所导致的任何后果承担责任。

封面图来源于网络，如有侵权，请联系删除！