跨平台应用开发框架（3）-----Qt(样式篇)

1.QSS

1.基本语法

2.QSS设置方式

1.指定控件样式设置

2.全局样式设置

1.样式的层叠特性

2.样式的优先级

3.从文件加载样式表

4.使用Qt Designer编辑样式

3.选择器

1.类型选择器

2.id选择器

3.并集选择器

4.子控件选择器

5.伪类选择器

4.样式属性

1.盒模型

1.设置边框和内边框

2.设置外边距

5.控件样式示例

1.按钮

2.输入框

3.复选框

4.单选框

5.列表

6.菜单栏

2.绘图

1.绘制线段

2.绘制矩形

3.绘制圆形

4.绘制文本

5.设置画笔

6.设置画刷

7.绘制图片

8.QPixmap

2.QImage

3.QPicture

1.QSS

QSS 的功能类似于网页开发中的 CSS（层叠样式表），它允许开发者通过一种声明式的语法来控制界面元素的外观，包括颜色、字体、边框、背景等诸多方面。

1.基本语法

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

QPushButton {color: red;
}

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

2.QSS设置方式

1.指定控件样式设置

给widget设置样式

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

2.全局样式设置

通过QApplication的setStyleSheet方法设置全局样式

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

1.样式的层叠特性

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

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

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

2.样式的优先级

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

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

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

3.从文件加载样式表

在资源文件夹下添加style.qss文件

QPushButton{color:red;
}

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);const QString& style=loadQSS();a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

4.使用Qt Designer编辑样式

3.选择器

选择器	实例	说明
全局选择器	*	选择所有的widget
类型选择器	QPushButton	选择所有的 QPushButton 和其子类的控件
类选择器	.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 的控件

1.类型选择器

int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QWidget{color:red;}");Widget w;w.show();return a.exec();
}

2.id选择器

int main(int argc, char *argv[])
{QApplication a(argc, argv);QString style="";style+="QPushButton{color:yellow;}";style+="#pushButton{color:red;}";style+="#pushButton_2{color:green;}";a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

3.并集选择器

int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QPushButton,QLabel,QLineEdit{color:red;}");Widget w;w.show();return a.exec();
}

4.子控件选择器

int main(int argc, char *argv[])
{QApplication a(argc, argv);QString style="";style+="QComboBox::down-arrow{image:url(:/Down.png)}";a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

5.伪类选择器

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

int main(int argc, char *argv[])
{QApplication a(argc, argv);QString style="";style+="QPushButton{color:red;}";style+="QPushButton:hover{color:green;}";style+="QPushButton:pressed{color:blue;}";a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

4.样式属性

1.盒模型

⼀个遵守盒模型的控件, 由上述几个部分构成.

Content 矩形区域: 存放控件内容. 比如包含的文本/图标等.

Border 矩形区域: 控件的边框.

Padding 矩形区域: 内边距. 边框和内容之间的距离.

Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离

QSS属性	说明
margin	设置四个方向的外边距. 复合属性
padding	设置四个方向的内边距. 复合属性
border-style	设置边框样式
border-width	边框的粗细
border-color	边框的颜色
border	复合属性, 相当于 border-style + border-width + border-color

1.设置边框和内边框

int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QLabel{border:5px solid red;padding-left:10px;}");Widget w;w.show();return a.exec();
}

2.设置外边距

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPushButton* btn=new QPushButton(this);btn->setGeometry(0,0,100,100);btn->setText("hello");btn->setStyleSheet("QPushButton{border:5px solid red;margin:20px;}");const QRect& rect=btn->geometry();qDebug()<<rect;
}

5.控件样式示例

1.按钮

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

2.输入框

属性	说明
font-size	设置文字大小
border-radius	设置圆角矩形. 数值设置的越大, 角就 "越圆
background-color	设置背景颜色

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);
}

3.复选框

要点	说明
:indicator	子控件选择器. 选中 checkbox 中的对钩部分
:hover	伪类选择器. 选中鼠标移动上去的状态
:pressed	伪类选择器. 选中鼠标按下的状态
:checked	伪类选择器. 选中 checkbox 被选中的状态
:unchecked	伪类选择器. 选中 checkbox 未被选中的状态
width	设置子控件宽度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸)
height	设置子控件高度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸)
image	设置子控件的图片. 像 QSpinBox, QComboBox 等可以使用这个属性来设置⼦控件的图片

4.单选框

要点	说明
:indicator	子控件选择器. 选中 radioButton中的对钩部分
:hover	伪类选择器. 选中鼠标移动上去的状态
:pressed	伪类选择器. 选中鼠标按下的状态
:checked	伪类选择器. 选中 radioButton 被选中的状态
:unchecked	伪类选择器. 选中radioButton 未被选中的状态
width	设置子控件宽度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸)
height	设置子控件高度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸)
image	设置子控件的图片. 像 QSpinBox, QComboBox 等可以使用这个属性来设置⼦控件的图片

5.列表

要点	说明
:item	选中 QListView 中的具体条目
:hover	选中⿏标悬停的条目
:selected	选中某个被选中的条目
background	设置背景颜色
border	设置边框
qlineargradient	设置渐变色

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);
}

6.菜单栏

要点	说明
QMenuBar::item	选中菜单栏中的元素
QMenuBar::item:selected	选中菜单来中的被选中的元素
QMenuBar::item:pressed	选中菜单栏中的鼠标点击的元素
QMenu::item	选中菜单中的元素
QMenu::item:selected	选中菜单中的被选中的元素
QMenu::separator	选中菜单中的分割线

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;
}

2.绘图

Qt 提供了强大的绘图系统，主要基于QPainter类。QPainter可以在QWidget（或其他绘图设备）上进行绘图操作。绘图操作通常在paintEvent函数中进行，当需要更新部件的外观时，paintEvent会被自动调用。

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

1.绘制线段

void drawLine(const QPoint &p1, const QPoint &p2);参数：p1：绘制起点坐标p2：绘制终点坐标

void paintEvent(QPaintEvent *event);

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.drawLine(QPoint(20,20),QPoint(200,20));
}

2.绘制矩形

void QPainter::drawRect(int x, int y, int width, int height)；
参数：x：窗⼝横坐标；y：窗⼝纵坐标；width：所绘制矩形的宽度；height：所绘制矩形的⾼度

painter.drawRect(20,200,100,50);

3.绘制圆形

void QPainter::drawEllipse(const QPoint &center, int rx, int ry)
参数：center：中⼼点坐标rx：横坐标ry：纵坐标

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

4.绘制文本

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);QFont font("华文行楷",24);painter.setFont(font);painter.setPen(Qt::red);painter.drawText(QRect(100,200,600,150),"天行健，君子以自强不息");
}

5.设置画笔

QPainter 在绘制时，是有⼀个默认的画笔的。在使⽤时也可以自定义画笔。在 Qt 中，QPen类中定义了 QPainter 应该如何绘制形状、线条和轮廓。同时通过 QPen类可以设置画笔的线宽、颜色、样式、画刷等。

画笔的颜色可以在实例化画笔对象时进行设置，画笔的宽度是通过 setWidth() 方法进⾏设置，画笔的风格是通过setStyle(）方法进⾏设置，设置画刷主要是通过 setBrush() 方法。

设置画笔颜色：QPen::QPen(const QColor &color) 画笔的颜色主要是通过 QColor 类设置；

设置画笔宽度：void QPen::setWidth(int width)

设置画笔风格：void QPen::setStyle(Qt::PenStyle style)

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);QPen pen(QColor(255,0,0));pen.setWidth(3);pen.setStyle(Qt::DashLine);painter.setPen(pen);painter.drawEllipse(QPoint(100,100),50,50);
}

6.设置画刷

在 Qt 中，画刷是使用QBrush类来描述，画刷大多用于填充。QBrush定义了QPainter的填充模式，具有样式、颜色、渐变以及纹理等属性。

画刷的格式中定义了填充的样式，使用Qt::BrushStyle 枚举，默认值是 Qt::NoBrush，也就是不进行任何填充。可以通过 Qt 助⼿查找画刷的格式。

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);QPen pen(QColor(255,0,0));pen.setWidth(3);pen.setStyle(Qt::DashLine);painter.setPen(pen);QBrush brush(Qt::cyan);brush.setStyle(Qt::Dense1Pattern);painter.setBrush(brush);painter.drawEllipse(QPoint(100,100),50,50);
}

7.绘制图片

Qt 提供了四个类来处理图像数据：QImage、QPixmap、QBitmap 和 QPicture，它们都是常用的绘图设备。其中QImage主要用来进行 I/O 处理，它对 I/O 处理操作进行了优化，而且可以用来直接访问和操作像素；QPixmap 主要用来在屏幕上显示图像，它对在屏幕上显示图像进行了优化；QBitmap是QPixma 的子类，用来处理颜色深度为1的图像，即只能显示黑白两种颜⾊；QPicture 用来记录并重演 QPainter 命令。

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.drawPixmap(0,0,QPixmap(":/1.jpg"));
}

平移图片

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.translate(100,100);painter.drawPixmap(0,0,QPixmap(":/1.jpg"));
}

缩放图片

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.drawPixmap(0,0,QPixmap(":/1.jpg"));painter.drawPixmap(300,400,50,60,QPixmap(":/1.jpg"));
}

旋转图片

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.translate(200,300);painter.rotate(90);painter.translate(-200,-300);painter.drawPixmap(0,0,QPixmap(":/1.jpg"));
}

8.QPixmap

使用 QPainter 直接在上面进行绘制图形

通过文件路径加载并显示图片.
搭配 QPainter 的 drawPixmap()函数, 可以把这个图片绘制到⼀个 QLabel、QPushButton 等控件上.
和系统/显示设备强相关, 不同系统/显示设备下, QPixmap 的显示可能会有所差别

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPixmap pix(500,500);QPainter painter(&pix);painter.setPen(Qt::red);painter.drawEllipse(QPoint(100,100),100,100);pix.save("C:\\Users\\25713\\Desktop\\pix.png");
}