文章目录
- QSS
- id选择器 & 类型选择器
- 伪类选择器
- 盒子模型
QSS
设置样式的时候,是可以指定某个控件来设置的。
指定控件之后,此时的样式就会针对这个指定的控件,也会针对子控件生效
ui->pushButton_2->setStyleSheet("QPushButton { color: green; }");
QPushButton 没有子控件
this->setStyleSheet("QPushButton {color : red ; } ") ; //会针对this的子控件也生效.
既是要考虑到子控件,也是要和选择器相关的.
- 如果设置了全局样式,然后在某个控件里又设置了其他的样式,会出现什么问题?
全局样式,和在某个控件里又设置的其他的样式,这两个样式会"叠加"起来
2 如果设置了全局样式,在某个控件里设置的样式和全局样式冲突了,会出现什么问题?
当全局样式和局部样式冲突的时, 局部样式的优先级是更高的。覆盖了对应的全局样式
场景:实际开发中,就可以在全局样式中设置比较通用的样式,统一整个程序的界面风格.如果需要针对某个控件进行微调,可以使用局部样式来做出调整.
把样式代码拎出来,放到单独的文件中。
后续可以直接让 C++ 代码来读取并加载文件内容
- 创建 qrc 文件,通过 qrc 管理样式文件。
- 创建单独的 qss 文件,把这样的文件放到 qrc 中
- 编写 C++ 代码,读取 qss 文件中的内容,并设置样式。
例如:
QT: QT - Gitee.com
id选择器 & 类型选择器
当类型选择器和 id 选择器选中同一个控件时,并且设置的样式是冲突的,此时,id 选择器的优先级更高
例如:
qss_4 · beihangya/QT - 码云 - 开源中国
如果不冲突,两种样式会叠加
给QCombox的子控件加上图标
qss_6 · beihangya/QT - 码云 - 开源中国
伪类选择器
伪类选择器,选中的是控件的“状态""符合一定状态条件"的控件
qss_7 · beihangya/QT - 码云 - 开源中国
盒子模型
创建一个 resource.qrc 文件,并导入图片
qss_10 · beihangya/QT - 码云 - 开源中国
QCheckBox{
font-size : 20px;
}
QCheckBox::indicator{
width: 20px ;
height : 20px ;
}
QCheckBox::indicator:unchecked{
image:url(:/new/prefix1/doge.png);
}
QCheckBox::indicator:unchecked:hover{
image:url(:/new/prefix1/rose.jpg);
}
QCheckBox::indicator:unchecked:pressed{
image:url(:/image/doge.png);
}
自定义单行输入框
qss_12 · beihangya/QT - 码云 - 开源中国
自定义列表框 ,使用渐变色
qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1)
x1: 起点的横坐标
y1: 起点的纵坐标
x2: 终点的横坐标
y2: 终点的纵坐标
stop: 0 起始颜色
stop: 1 结束颜色
例如:
从左到右的渐变
x1: 0 , y1: 0 , x2: 1 , y2: 0
从上到下的渐变
x1: 0 ,y1: 0 , x2: 0 ,y2: 1
对角线方向从左上到右下的渐变
x1: 0 ,y1: 0 ,x2: 1 , y2: 1
需求:自定义菜单栏
qss_14 · beihangya/QT - 码云 - 开源中国
需求:自定义登录界面 , 并且给登录界面设置背景图
如何设置背景?
解决方案:
1、直接给 QWidget 顶层窗口设置背景图。
问题 :但是 Qt 中存在限制,直接给顶层窗口设置背景会失效。
问题原因:(原因暂时不可考)
2、可以给上述控件外头套上一个和窗口一样大小的 QFrame 控件。(该方案可以解决设置背景)
QFrame 也是 QWidget 的一个子类。
qss_15 · beihangya/QT - 码云 - 开源中国
Qt中设置背景图, 有两个方式
1、background-image 属性 ,适用场景 :图片固定大小
2、border-image 属性. 适用场景 :背景会自动跟随控件的大小变化