QSS【QT】 - 技术栈

文章目录

QSS
[id选择器 & 类型选择器](#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 属性. 适用场景：背景会自动跟随控件的大小变化