跨平台应用开发框架（4）-----Qt(样式篇)
目录
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 ¢er, 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");
}
2.QImage
- 使用QPainter 直接在上面进行绘制图形.
- 通过文件路径加载并显示图片.
- 能够针对图片进行像素级别的操作(操作某个指定的像素).
- 独立于硬件的绘制系统, 能够在不同系统之上提供⼀致的显示
3.QPicture
- 使用QPainter 直接在上面进行绘制图形.
- 通过文件路径加载并显示图片.
- 能够记录 QPainter 的操作步骤.
- 独立于硬件的绘制系统, 能够在不同系统之上提供⼀致的显示
原文地址：https://blog.csdn.net/lys20221113242/article/details/144067302
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！