商业网站规划有经验的番禺网站建设
文章目录
- 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 属性. 适用场景 ：背景会自动跟随控件的大小变化