QT中的QSS---界面美化
QSS是Qt中能够针对界面的样式进行设置，如：大小，位置，颜色，背景，间距，字体等
与CSS功能一致
设置控件样式
基本语法
选择器
{
属性名：属性值;
}
选择器描述了当前样式针对哪类/个控件生效
属性名：属性值是对某些样式进行具体的设置，可以有多个
如：
QPushButton { color: red; }
创建继承自widget的文件进行实现
在ui界面创建一个按钮
在widget构造函数通过QSS进行
指定控件后，此时的样式就会针对指定的控件生效，也会对指定控件的子控件生效
在ui界面再创建一个按钮，直接指定控件类型，而不是控件
样式对此类型所有控件生效
设置全局样式
将界面上所有的样式都集中到一起进行组织
例：
再创建一个继承自widget的文件
在ui界面创建3个按钮
在main.cpp文件进行全局样式的设置
通过QApplication实例的a对象进行设置
如果设置了全局样式，然后在某个控件又设置了样式，哪个会生效？
如：
如果设置的相同类型的样式，那么全局样式失效,局部样式优先级高
如果全局和局部设置了不同类型的样式，那么两种样式会叠加起来
CSS样式设置和代码分离
实现通过单独的文件来设置控件样式，而不是在代码文件中进行设置
例：
创建一个继承自Widget的文件
创建一个qrc文件，通过qrc来管理样式文件
创建单独的qss文件，通过qrc机制导入程序
编写c++代码，读取qss文件的内容并设置样式
添加qss文件时，直接新建一个qss文件，添加到qrc文件中
添加后在程序中打开该文件
编写CSS代码
在ui界面创建一个pushButton
在main.cpp通过函数读取qss文件，将读取到的样式设置进界面
该方法不太便利，需要创建文件，读取文件
将样式直接写入ui文件
Qt Designer中集成了代码和样式分离的功能，允许直接把样式写进.ui
文件中
如：
创建一个继承自widget的文件
在ui界面创建一个pushButton
在按钮旁边空白处，选中整个窗口，点击鼠标右键，选择改变样式表
能够在此处编写界面的样式，会记录到ui文件中，在程序允许时自动生效
带实时预览
在ui文件自动中多出一个设置样式的操作
也可以在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的控件 |
例：
创建一个继承自widget的文件
在ui界面创建一个pushbutton
此处的QPushButton选择器不仅对QPushButton生效，同样也会对QPushButton的子类生效
如，QPushButton是QWidget的子类
将QWidget选中后，同样对其子类QPushButton生效
当使用类选择器，如.QWidget时，就不会选中子类
如：
再在ui界面创建两个pushButton，通过id选择器，将他们设为不同的颜色
例：
给控件的子控件进行修改样式
在ui界面创建一个ComboBox下拉框
用qrc机制导入一个图片
将图片设置仅comboBox的子控件--down-arrow
伪类选择器
伪类选择器，是根据控件所处的某个状态被选择的，例如按钮被按下，输入框获取到焦点，鼠标移动到某个控件上等
当状态具备时，控件被选中，样式生效
当状态不具备时，控件不被选中，样式失效
使用:的方式定义伪类选择器
常见伪类选择器
常见伪类选择器
| 伪类选择器 | 说明 |
| :hover | 鼠标放到控件上 |
| :pressed | 鼠标左键按下时 |
| :focus | 获取输入焦点时 |
| :enabled | 元素处于可用状态时 |
| :checked | 被勾选时 |
| :read-only | 元素为只读状态时 |
这些状态都可以使用!来取反，如:!hover就算鼠标离开控件时，:!pressed就是鼠标松开时
例：
创建一个继承自widget的文件
在ui界面创建一个按钮
样式属性
QSS中可以对控件设置的属性非常多，一般随用随查
在Qt Assiatant中的Qt Style Sheet Reference章节进行查看
常用属性如：
| 属性 | 说明 |
| background-color | 设置控件背景颜色 |
| border-radius | 单位为像素，设置控件圆角，值越大，控件越圆 |
| font-size | 设置字体大小 |
| color | 设置文字颜色 |
盒模型(Box Model)
Qt中每个widget都是一个矩形
相关属性
复合属性的意思是：
如：margin---> margin-left margin-left margin-top margin-bottom
margin: 10px; 四个方向都是10px的外边距
margin:10px 20px; 上下是10px，左右是20px
margin:10px 20px 30px 40px; 上是10px,右是20px，下是30px，左是40px，按顺时针方向进行设置
例：
内边距
创建一个继承自widget的文件
在ui界面创建一个QLabel
外边距
创建一个继承自widget的文件
在构造函数创建pushButton，进行初始化
设置外边距后，按钮变小了
可打印其高度和宽度看是否变化
未发生变化，因为边框是在控件中进行显示的，所以看起来按钮变小了
复选框
相关属性：
| 要点 | 说明 |
| ::indicator | 子控件选择器,选中checkbox中的对勾部分 |
| :hover | 伪类选择器，选中鼠标移动上去的状态 |
| :pressed | 伪类选择器，选中鼠标按下的状态 |
| :checked | 伪类选择器，选中checkbox被选中的状态 |
| :unchecked | 伪类选择器，选中checkbox未被选中的状态 |
| width | 设置子控件宽度，对普通控件无效 |
| height | 设置子控件高度，对普通控件无效 |
| image | 设置子控件的图片 |
实现自定义复选框样式
将复选框的三种状态都导入对应的图片
准备6张图片
使用灰色作为默认状态，粉色作为hover状态，蓝色作为pressed状态
新建一个widget文件
在ui界面创建一个checkbox
使用qrc机制，创建资源文件，将图片导入
在ui界面右键点击checkbox选中改变样式表来设置样式
先对整体样式进行设置
indicator是复选框的子控件---小方框
实现其在未勾选是，在默认，鼠标放置，按下
勾选后，在默认，鼠标放在，按下都有不同的样式
输入框
自定义单行编辑框
相关属性
| 属性 | 说明 |
| border-width | 设置边框宽度 |
| border-radius | 设置边框圆角 |
| border-color | 设置边框颜色 |
| border-style | 设置边框风格 |
| padding | 设置内边距 |
| color | 设置文字颜色 |
| background | 设置背景颜色 |
| selection-background-color | 设置选中文字的背景颜色 |
| selection-color | 设置选中文字的文本颜色 |
创建一个继承自widget的文件
在ui界面创建一个lineEdit，转到样式表
修改文本颜色，大小，背景颜色
修改文本选中后的颜色和背景色
列表框
自定义列表框
创建一个继承自widget的ui文件
在ui界面创建一个listWidget，添加元素
转到改变样式表
修改鼠标悬停和点击其元素的背景色
此处设置的是纯色
可以设置为渐变色---通过qlineargradient来进行设置
需要填写六个参数
参数：
| x1 | 开始颜色渐变的横坐标 |
| y1 | 开始颜色渐变的纵坐标 |
| x2 | 结束颜色渐变的横坐标 |
| y2 | 结束颜色渐变的纵坐标 |
| stop:0 | 开始渐变的颜色 |
| stop:1 | 结束渐变的颜色 |
如 x1:0 y1:0 x2:1 y2:1 ---从左到右渐变
x1:0 y1:0 x2:0 y2:1---从上到下渐变
x1:0 y1:0 x2:1 y2:1---对角线渐变
设置渐变色：
从左往右渐变和上往下渐变
菜单栏
自定义菜单栏
相关属性
| 要点 | 说明 |
| QMenuBar::item | 选中菜单栏中的元素 |
| QMenuBar::item:selected | 选中菜单栏中被选中的元素 |
| QMenuBar::item:pressed | 选中菜单栏中的鼠标点击的元素 |
| QMenu::item | 选中菜单中的元素 |
| QMenu::item:selected | 选中菜单中被选中的元素 |
| QMenu::separator | 选中菜单栏的分割线 |
创建一个继承自MainWindow的文件
进行初始化
转到改变样式表
修改背景色
修改菜单背景色，边框为圆角，修改外边距
添加菜单被选中样式
添加菜单项被选中后背景色
实现登陆界面
创建一个继承自widget的文件
在ui界面创建两个lineEdit，一个checkBox，pushButton
通过垂直布局管理器进行管理
设置两个输入框和按钮的最小高度
设置输入框的提示内容
通过qrc机制导入资源文件，将图片设置为背景
不能直接给顶层窗口设置背景图---因为Qt中存在限制，直接给顶层窗口设置背景会失效
解决方法----给布局中的控件外面套一个和窗口一样大的控件---QFrame控件，通过给QFrame控件来设置背景
结构为QWidget下是QFrame,QFarm下是layout，layout下是具体控件
转到QWidget的改变样式表
设置其控件---QFrame的背景
通过设置border-image，而不是background-image，因为通过border-image设置背景图片后，背景会跟随控件大小而改变
设置输入框文字颜色和背景颜色
设置输入框内边距，文字大小，取消边框，设置圆角
将密码输入框的表现模式设置为密码
对checkBox和pushButton进行设置
设置按钮按下后的样式
效果：
