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

目录QSSwidget.cppQSS的基本使用widget.cppQSS选择器的用法widget.cppQSS子控件选择器widget.cppQSS伪类选择器widget.cppQSS盒子模型QSS 基本格式与基础用法QSS 选择器分类及作用范围QSS 子控件选择器QSS 伪类选择器QSS 盒子模型绘图API的基本使用widget.cpp重写paintEvent事件函数widget.cpp画笔的使用widget.cpp画刷的使用paintEvent 绘图事件函数QPainter 画家类QPen 画笔类QBrush 画刷类QSSwidget.cppQSS的基本使用#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; }widget.cppQSS选择器的用法#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(); }widget.cppQSS子控件选择器#include widget.h // Qt应用程序核心类负责程序启动、事件循环、全局样式管理 #include QApplication int main(int argc, char *argv[]) { // 创建Qt应用程序对象程序入口必须 QApplication a(argc, argv); // 定义QSS样式字符串 // 1. QComboBox::down-arrowQSS 子控件选择器 // :: 代表选中 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(); }widget.cppQSS伪类选择器#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(); }widget.cppQSS盒子模型#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的基本使用widget.cpp重写paintEvent事件函数#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. 创建画家对象 // QPainterQt 绘图核心工具 // 参数 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); }widget.cpp画笔的使用#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); }widget.cpp画刷的使用#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); // 绑定画刷