目录
基本语法
选择器{
属性名：属性值；
}
选择器：先选择某个/某一类控件，接下来进行的各种属性设置，都是针对选中的控件生效的
设置全局样式
界面上所有的样式都集中到一起来组织
在main.cpp中
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
a.setStyleSheet("QPushButton {color:blue;}");
Widget w;
w.show();
return a.exec();
}
问题
如果设置了全局样式，然后在某个控件里又设置了 其他样式，会怎么样？
如果全局样式与局部样式不冲突的话，两者的样式效果会叠加起来 ，也就是层叠性。
如果设置了全局样式，在某个控件里设置的样式和全局样式冲突了，会怎么样？
如果全局样式与局部样式冲突的话，局部样式的优先级是更高的，覆盖了对应的全局样式。
分离样式代码
方案1
- 创建qrc文件，通过qrc管理样式文件
- 创建单独的qss文件，把这样的文件放到qrc中
- 编写c++代码，读取qss文件中的内容，并设置样式
代码如下：
#include "widget.h"
#include <QApplication>
#include <QFile>
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());
Widget w;
w.show();
return a.exec();
}
方案2
在Qt Designer 中集成了这样的功能，允许我们把样式直接写到.ui文件中。
通过点击如下所示的“改变样式表”，在这里设置样式还能实时预览效果。
综上所述，由于设置样式的方式太灵活了，有很多地方都能设置，就导致当某个控件样式不符合预期的时候，排查起来就比较麻烦。在实际开发中，建议统一使用某一种方式来设置样式。
选择器
概况
qss的选择器支持以下几种：
| 选择器 | 示例 | 说明 |
|---|---|---|
|
全局选择器
| * |
选择所有的 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 的控件.
|
- 这里要区分类型选择器和类选择器，一个会包含其子类，一个不包含。
- id选择器中的id为控件的ObjectName
- 当 类型选择器和id选择器选中同一控件，并且设置的样式是冲突的，此时id选择器的优先级更高。
子控件选择器
有些控件内部包含了多个 "子控件" . ⽐如 QComboBox 的下拉后的⾯板, 比如 QSpinBox 的上下按钮等。
可以通过子控件选择器 :: , 针对上述子控件进⾏样式设置.
首先我们可以通过qt帮助文档，来查看有哪些子控件，和他们属于哪个控件
示例：修改下拉框的下拉按钮样式
#include "widget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QString style = "QComboBox::down-arrow{image:url(:/down_row.png);}";
a.setStyleSheet(style);
Widget w;
w.show();
return a.exec();
}
效果如下：
伪类选择器
伪类选择器，选中的是控件的“状态”，“符合一定状态条件”的控件。
也就是说
- 当状态具备时，控件被选中，样式生效
- 当状态不具备时，控件不被选中，样式失效
使用 ：的方式定义伪类选择器
常用的伪类选择器
| 伪类选择器 | 说明 |
|---|---|
|
:hover
|
⿏标放到控件上
|
|
:pressed
|
⿏标左键按下时
|
|
:focus
|
获取输⼊焦点时
|
|
:enabled
|
元素处于可⽤状态时
|
|
:checked
|
被勾选时
|
|
:read-only
|
元素为只读状态时
|
这些状态可以使用 !
来取反. 比如
:!hover
就是⿏标离开控件时,
:!pressed
就是⿏标松开时,
等等。
更多的伪类选择器，可以查看qt助手
示例：鼠标悬停字体变红，点击变蓝
QString style = "QPushButton:hover{color:red;}";
style+="QPushButton:pressed{color:blue;}";
a.setStyleSheet(style);盒子模型
box model
⼀个遵守盒模型的控件, 由上述⼏个部分构成.
- Content 矩形区域: 存放控件内容. ⽐如包含的⽂本/图标等.
- Border 矩形区域: 控件的边框.
- Padding 矩形区域: 内边距. 边框和内容之间的距离.
- Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离
默认情况下, 外边距, 内边距, 边框宽度都是 0，这与css中的盒模型基本类似
| 属性 | 说明 |
|---|---|
|
margin
|
设置四个方向的外边距. 复合属性.
|
|
padding
|
设置四个方向的内边距. 复合属性.
|
|
border-style
|
设置边框样式
|
|
border-width
|
边框的粗细
|
|
border-color
|
边框的颜⾊
|
|
border
|
复合属性, 相当于 border-style + border-width + border-color
|
修改控件样式示例
按钮
这里区分color和background-color属性，color设置的是字体的属性，background-color设置的是背景颜色。
QPushButton{
font-size:20px;
boder:2px solid rgb(171, 165, 255);
boder-radius:15px;
background-color:rgb(237, 213, 255);
color:white;
}
QPushButton:pressed{
background-color:rgb(156, 110, 255);
}属性小结
| 属性 | 说明 |
|---|---|
|
font-size
|
设置文字大小
|
|
border-radius
|
设置圆⻆矩形
数值设置的越大, 角就 "越圆"
|
|
background-color
|
设置背景颜色
|
复选框
这里设置复选框未选中、未选中鼠标悬停、勾选时的图标
QCheckBox{
font-size:20px;
}
QCheckBox::indicator{
width:20px;
height:20px;
}
QCheckBox::indicator:unchecked{
image:url(:/checkbox_uncheck.png);
}
QCheckBox::indicator:unchecked:hover{
image:url(:/checkbox.png);
}
QCheckBox::indicator:checked{
image:url(:/checkbox_check.png)
}属性小结
| 要点 | 说明 |
|---|---|
|
::indicator
|
⼦控件选择器.
选中 checkbox 中的对钩部分.
|
|
:hover
| 伪类选择器. 选中⿏标移动上去的状态. |
|
:pressed
|
伪类选择器.
选中⿏标按下的状态.
|
|
:checked
|
伪类选择器.
选中 checkbox 被选中的状态.
|
|
:unchecked
|
伪类选择器.
选中 checkbox 未被选中的状态.
|
|
width
|
设置⼦控件宽度.
对于普通控件⽆效 (普通控件使⽤ geometry 方式设定尺⼨).
|
|
height
|
设置⼦控件⾼度.
对于普通控件⽆效 (普通控件使⽤ geometry 方式设定尺⼨)
|
|
image
|
设置⼦控件的图⽚.
像 QSpinBox, QComboBox 等可以使⽤这个属性来设置⼦控件的图⽚
|
单选框的设置与复选框类似，两者涉及属性基本上一样，这里就不再介绍。
输入框
QLineEdit{
border-width:1px;
border-radius:10px;
border-color:rgb(148, 255, 252);
border-style:inset;
padding:0 8px;
color:rgb(255, 255, 255);
background:rgb(100, 100, 100);
selection-background-color:rgb(255, 255, 0);
selection-color:rgb(121, 121, 121);
}属性小结
| 属性 | 说明 |
|---|---|
|
border-width
|
设置边框宽度
|
|
border-radius
|
设置边框圆⻆
|
|
border-color
|
设置边框颜⾊
|
|
border-style
|
设置边框⻛格
|
|
padding
|
设置内边距
|
|
color
|
设置⽂字颜⾊
|
|
background
|
设置背景颜⾊
|
|
selection-background-color
|
设置选中⽂字的背景颜⾊
|
|
selection-color
|
设置选中⽂字的⽂本颜⾊
|
列表框
属性小结
| 属性 | 说明 |
|---|---|
|
::item
|
选中 QListView 中的具体条⽬
|
|
:hover
|
选中⿏标悬停的条⽬
|
|
:selected
|
选中某个被选中的条⽬
|
|
background
|
设置背景颜⾊
|
|
border
|
设置边框
|
|
qlineargradient
|
设置渐变⾊
|
渐变色
qlineargradient 设置渐变色（线性渐变）
此处要填写六个参数：
- x1:起点的横坐标
- y1:起点的纵坐标
- x2:终点的横坐标
- y2:终点的纵坐标
这里的取值非常有限，要么是0，要么是1
- 起点为（0，0）终点是（1，0）就是横向的渐变、
- 起点为（0，0）终点是（0，1）就是竖向的渐变、
- 起点为（0，0）终点是（1，1）就是对角线的渐变
如下图所示：
另外两个参数就是
- stop:0 起始颜色
- stop:1 结束颜色
示例：
QListWidget::item:hover{
background:qlineargradient(x1:0,y1:0,x2:0,y2:1,
stop:0 #FAFBFE,stop:1 #DCDEF1);
}
QListWidget::item:selected{
boder:1px solid #6a6ea9;
background:qlineargradient(x1:0,y1:0,x2:0,y2:1);
}效果如下：
菜单栏
设置菜单栏的背景色和各个菜单之间的间距
QMenuBar{
background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,
stop:0 lightgray,stop:1 darkgray );
spacing:3px;
}设置菜单的背景颜色和内边距
QMenuBar::item{
padding:1px 4px;
background:transparent;
border-radius:4px;
}设置选中菜单/点击菜单时背景颜色修改
QMenuBar::item:selected{
background:#a8a8a8;
}
QMenuBar::item:pressed{
background:#888888;
}设置菜单项之间的分割线样式
QMenu::separator{
height:2px;
background:lightblue;
margin-left:10px;
margin-right:5px;
}完整代码：
QMenuBar{
background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,
stop:0 lightgray,stop:1 darkgray );
spacing:3px;
}
QMenuBar::item{
padding:1px 4px;
background:transparent;
border-radius:4px;
}
QMenuBar::item:selected{
background:#a8a8a8;
}
QMenuBar::item:pressed{
background:#888888;
}
QMenu{
background-color:white;
margin:0 2px
}
QMenu::item{
padding:2px 25px 2px 20px;
border:3px solid transparent;
}
QMenu::item:selected{
border-color:darkblue;
background:rgba(100, 100, 100, 150)
}
QMenu::separator{
height:2px;
background:lightblue;
margin-left:10px;
margin-right:5px;
}效果如下
属性小结
| 属性 | 说明 |
|---|---|
|
QMenuBar::item
|
选中菜单栏中的元素.
|
|
QMenuBar::item:selected
|
选中菜单来中的被选中的元素.
|
|
QMenuBar::item:pressed
|
选中菜单栏中的⿏标点击的元素
|
|
QMenu::item
|
选中菜单中的元素
|
|
QMenu::item:selected
|
选中菜单中的被选中的元素
|
|
QMenu::separator
|
选中菜单中的分割线.
|
登录界面设计
最终效果
设置背景
在qt中直接给QWidget顶层窗口设置背景图会失效，因此我们可以给上述控件外头套上一个和窗口一样大小的QFrame控件，用来设置背景图。
qt中设置背景图除了background-image之外，还有border-image属性，两者的区别：
- background-image：设计的背景图片固定大小
- border-image：设置的背景图片跟随控件的大小变化
QFrame{
border-image:url(:/background.jpg)
}
使用QVBoxLayout来管理两个输入框和勾选框、按钮；再将这个QVBoxLayout放到一个QFrame中
设置输入框样式
QLineEdit{
color:#8d98a1;
background-color:#405361;
padding:0 5px;
font-size:20px;
border-style:none;
border-radius:10px;
}设置按钮样式
QPushButton{
font-size:20px;
color:white;
background-color:#555;
border-style:outset;
border-radius:10px;
}
QPushButton:pressed{
color:black;
background-color:#ce1db;
border-style:inset;
}完整代码
QFrame{
border-image:url(:/background.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:#ce1db;
border-style:inset;
}
973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
