Qt界面优化QSS、QPainter使用

QSS

基本语法

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

指定控件样式设置

同时会对控件内的所有子空间都生效。

与全局样式同时设置，则会叠加展示；如果其中属性与全局样式冲突，指定控件样式优先展示。

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

全局样式设置

    QApplication a(argc, argv);
    a.setStyleSheet("QPushButton {color: red; }");

文件加载样式表

创建qss文件

QPushButton {
    color: red;
}

加载qss文件

QFile file(":/style.qss");
file.open(QFile::ReadOnly);
QString style = file.readAll();
file.close();
ui->pushButton->setStyleSheet(style);

Qt Designer编辑样式表

选择器

选择器描述的范围越精准，则优先级越高，一般来说, ID选择器优先级是最高的。

选择器	示例	说明
全局选择器	*	选择所有的widget
类型选择器(type selector)	QPushButton	选择所有的QPushButton和其子类的控件.
类选择器(class selector)	.QPushButton	选择所有的QPushButton的控件.不会选择子类.
ID 选择器	#pushButton_2	选择objectName为pushButton_2的控件.
后代选择器	QDialog QPushButton	选择QDialog的所有后代(子控件,孙子控件等等)中的QPushButton.
子选择器	QDialog > QPushButton	选择QDialog的所有子控件中的 QPushButton.
并集选择器	QPushButton,QLineEdit, QComboBox	选择QPushButton,QLineEdit,QComboBox这三种控件.(即接下来的样式会针对这三种控件都生效).
属性选择器	QPushButton[flat="false"]	选择所有QPushButton中,flat属性为false的控件.

 代码示例

QString style = "QPushButton { color: red; }";
style += "#pushButton_2 { color: blue; }";

子控件选择器(Sub-Controls)

语法

控件::子控件

代码示例

QString style = "QComboBox::down-arrow { image: url(:/down.png); }";
// QProgressBar修改chunk需要将对齐alginment设置水平垂直居中，否则文字会有bug
style += "QProgressBar::chunk { background-color: #ff0000; }";

伪类选择器

语法

控件:状态

伪类选择器	说明
:hover	鼠标放到控件上
:pressed	鼠标左键按下时
:focus	获取输入焦点时
:enabled	元素处于可用状态时
:checked	被勾选时
:read-only	元素为只读状态时

这些状态可以使用 ! 来取反. 比如 :!hover 就是鼠标离开控件。

代码示例

同样也可以使用事件来实现相同效果。

style += "QPushButton:hover {color: green;}";
style += "QPushButton:!pressed {color: red;}";

样式属性

参考文档Qt Style Sheets 有详细介绍。

盒模型(Box Model)

属性设置

margin	设置四个方向的外边距，复合属性. margin-top / right / bottom / left (顺时针方向)
padding	设置四个方向的内边距.，复合属性. padding-top / right / bottom / left (顺时针方向)
border	复合属性, 相当于 border-style + border-width + border-color

代码示例

style += "QLabel { border: 5px solid red; margin: 2px; padding: 2px}";

控件样式示例

QPushButton

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

QCheckBox

QCheckBox {
	font-size: 20px;
}
QCheckBox::indicator:unchecked {
	border-image: url(:/checkbox-unchecked.png)
}
QCheckBox::indicator:unchecked:hover {
	border-image: url(:/checkbox-unchecked_hover.png);
}
QCheckBox::indicator:checked {
	border-image: url(:/checkbox-checked.png)
}
QCheckBox::indicator:checked:hover {
	border-image: url(:/checkbox-checked_hover.png)
}

QRadioBox

QWidget QRadioButton {
	font-size: 20px;
}
QWidget QRadioButton::indicator {
	width: 20px;
	height: 20px;
}

QLineEdit

QLineEdit {
	border-width: 1px; 
	border-radius: 10px;
	border-color: rgb(58, 58, 58);
	border-style: inset;
	padding: 0 8px;
	color: rgb(255, 255, 255);
	background:rgb(100, 100, 100);
	selection-background-color: rgb(187, 187, 187);
	selection-color: rgb(60, 63, 65);
}

QListWidget

QListView::item:hover {
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
	stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}
QListView::item:selected {
	border: 1px solid #6a6ea9;
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
	stop: 0 #6a6ea9, stop: 1 #888dd9);
}

qlineargradient渐变色函数。x1, y1: 标注了一个起点. x2, y2: 标注了一个终点.

例如: x1: 0, y1: 0, x2: 0, y2: 1 就是垂直方向从上向下进行颜色渐变.

stop: 0 和 stop: 1 描述了两个颜色. 渐变过程就是从 stop0 往 stop1 进行渐变的。

QMenuBar

QMenuBar {
	background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
	stop:0 lightgray, stop:1 darkgray);
	spacing: 3px; /* spacing between menu bar items */
}
QMenuBar::item {
	padding: 1px 4px;
	background: transparent;
	border-radius: 4px;
}
QMenuBar::item:selected { /* when selected using mouse or keyboard */
	background: #a8a8a8;
}
QMenuBar::item:pressed {
	background: #888888;
}
QMenu {
	background-color: white;
	margin: 0 2px; /* some spacing around the menu */
}
QMenu::item {
	padding: 2px 25px 2px 20px;
	border: 3px solid transparent; /* reserve space for selection border */
}
QMenu::item:selected {
	border-color: darkblue;
	background: rgba(100, 100, 100, 150);
}
QMenu::separator {
	height: 2px;
	background: lightblue;
	margin-left: 10px;
	margin-right: 5px;
}

QWidget

#centralwidget {
	border-image: url(:/cat.jpg);
}
QLineEdit {
	color: #8d98a1;
	background-color: #405361;
	padding: 0 5px;
	font-size: 20px;
	border-style: none;
	border-radius: 10px;
}
QCheckBox {
	color: white;
	background-color: transparent;
}
QPushButton {
	font-size: 20px;
	color: white;
	background-color: #555;
	border-style: outset;
	border-radius: 10px;
}
QPushButton:pressed {
	color: black;
	background-color: #ced1db;
	border-style: inset;
}

更多参考 https://github.com/GTRONICK/QSS

绘图QPainter

QPainter	"绘画者" 或者 "画家". 用来绘图的对象,提供了一系列drawXXX 方法,可以允许我们绘制各种图形.
QPaintDevice	"画板". 描述了 QPainter 把图形画到哪个对象上.像咱们之前用过的QWidget也是一种QPaintDevice(QWidget是QPaintDevice的子类).
QPen	“画笔". 描述了 QPainter 画出来的线是什么样的.
QBrush	“画刷". 描述了 QPainter 填充一个区域是什么样的.

事件

void paintEvent(QPaintEvent *event);

触发条件

• 控件首次创建.

• 控件被遮挡, 再解除遮挡.

• 窗口最小化, 再恢复.

• 控件大小发生变化时.

• 主动调用 repaint() 或者 update() 方法. (这两个方法都是 QWidget 的方法).

代码示例

// QWidget是QPaintDevice子类，this代表画板
QPainter painter(this);
// 画一条直线
painter.drawLine(QPoint(20,50),QPoint(60,50));
// 画一个矩形
painter.drawRect(70,50,50,20);
// 画一个圆
painter.drawEllipse(150,50,50,20);
// 设置字体
painter.setFont(QFont("宋体",24));
// 设置画笔
painter.setPen(Qt::red);
// 画文字,坐标为基准线，对应英文格子线第三条
painter.drawText(QPoint(20,150),"hello");

画笔

QPainter painter(this);
// 设置画笔
QPen pen(Qt::red);
pen.setWidth(3);
pen.setStyle(Qt::DashLine);
painter.setPen(pen);
// 画一个圆
painter.drawEllipse(QPoint(200,150),30,30);

画刷

QPainter painter(this);
QBrush brush(Qt::blue);
brush.setStyle(Qt::CrossPattern);
painter.setBrush(brush);
// 画一个圆
painter.drawEllipse(QPoint(300,150),30,30);

绘制图片

// 绘制图片
painter.drawPixmap(QRect(0,0,200,200),QPixmap(":/cat.jpg"));

平移原点

// 平移原点
painter.translate(100,100);
// 绘制图片
painter.drawPixmap(QRect(0,0,200,200),QPixmap(":/cat.jpg"));

旋转图片

// 设置原点
painter.translate(100,100);
// 顺时针旋转180度
painter.rotate(180);
// 复原原点
painter.translate(-200,-200);
// 绘制图片
painter.drawPixmap(QRect(0,0,200,200),QPixmap(":/cat.jpg"));

复制

// 绘制图片
painter.drawPixmap(QRect(0,0,200,200),QPixmap(":/cat.jpg"));
// 平移原点
painter.translate(100,100);
// 绘制图片
painter.drawPixmap(QRect(0,0,200,200),QPixmap(":/cat.jpg"));

保存 / 加载画家状态

// 画一个矩形
painter.drawRect(10,10,50,50);
// 平移原点
painter.translate(100,0);
// 保存画家状态
painter.save();
// 平移原点
painter.translate(100,0);
// 画一个圆
painter.drawEllipse(10,10,50,50);
// 恢复画家状态
painter.restore();
// 画出文字
painter.drawText(0,20,"画家状态恢复");

绘图设备

QPixmap

// 创建绘图设备
QPixmap pixmap(100,100);
pixmap.fill(Qt::white);
// 创建画图对象
QPainter painter(&pixmap);
painter.setPen(Qt::red);
// 画一个圆
painter.drawEllipse(10,10,50,50);
// 保存图片
pixmap.save("F:/pixmap.png");

QImage

能够针对图片进行像素级别的操作(操作某个指定的像素).

QPainter painter(this);
QImage image(":/cat.jpg");
// 修改像素点
for (int i = 50; i < 100; i++)
{
    for (int j = 50; j < 100; j++)
    {
        image.setPixel(i,j,qRgb(255,0,0));
    }
}
image.save("F:/image.png");
painter.drawImage(0,0,image);

QPicture

能够记录 QPainter 的操作步骤.

QPicture picture;
QPainter painter;
painter.begin(&picture);
// 画一个圆
painter.drawEllipse(10,10,50,50);
painter.end();
picture.save("F:/picture.pic");

QPainter painter(this);
QPicture picture;
picture.load("F:/picture.pic");
painter.drawPicture(0,0,picture);