QSS概念:
Qt仿照CSS的模式,引⼊了QSS,来对Qt中的控件做出样式上的设定,从⽽允许程序猿写出界⾯更好看
的代码。由于Qt本⾝的设计理念和⽹⻚前端还是存在⼀定差异的,因此QSS中只能⽀持部分CSS属性。整体来说QSS要⽐CSS更简单⼀些
注:如果通过QSS设置的样式和通过C++代码设置的样式冲突,但QSS优先级更⾼
基本语法:
选择器:对选中的控件进行各种属性的设置
此外,给指定控件设置样式之后,该控件的⼦元素也会受到影响
设置全局样式:将界面上的样式集中设置
如果设置了全局样式,而某个控件中又设置了其他样式,那么这俩样式会叠加展现。此外当全局样式与局部样式冲突时,局部的优先级更高
以上样式代码和C++代码是混在一起的,两者分开能够降低维护的成本
样式设置方法:
方法1:
- 创建qrc文件,通过qrc管理样式文件
- 创建单独的qss文件,将qss文件放入qrc中
- 编写C++代码,读取qss内容并设置样式
方法2:
- QT Designer中集成了该功能,允许将样式直接写到ui文件中。右击界面选择样式表即可编写样式,且左下角还有格式校验
样式设定方法太多也是种烦恼,这就容易导致某个控件的样式不符合预期,所以样式的统一设置就显得更有必要了。
选择器
类型选择器 | 选择所有的QPushButton和其子类的控件 |
ID选择器 | 选择objectName为pushButton_2的控件 |
并集选择器 | 选择QPushButton,QLineEdit,QComboBox三种控件 |
类选择器 | 只会对选择的控件生效,不会对其子类生效 |
类型选择器不仅会对选择的控件生效还会对子类也产生影响
子控件选择器:
重新设置下拉按钮:创建qrc文件导入图标再代码设置
伪类选择器:
该选择器选中的不是控件,而是控件的状态。
鼠标悬放按钮上变色,代码示例:
盒子模型:
- Content矩形区域:存放控件内容,⽐如包含的⽂本/图标等
- Border矩形区域:控件的边框
- Padding矩形区域:内边距,边框和内容之间的距离
- Margin矩形区域:外边距.边框到控件 geometry 返回的矩形边界的距离
默认情况下,外边距,内边距,边框宽度都是0
margin | 设置四个方向的外边距 |
padding | 设置四个方向的内边距 |
border-style | 设置边框样式 |
border-width | 设置边框粗细 |
boeder-color | 边框颜色 |
border | 复合属性 |
示例:
给按钮设置样式:
复选框:
自定义复选框
给输入框设置样式:
给列表框设置样式: