【QT:QSS】

发布于:2025-03-20 ⋅ 阅读:(22) ⋅ 点赞:(0)

QSS概念:

Qt仿照CSS的模式,引⼊了QSS,来对Qt中的控件做出样式上的设定,从⽽允许程序猿写出界⾯更好看
的代码。由于Qt本⾝的设计理念和⽹⻚前端还是存在⼀定差异的,因此QSS中只能⽀持部分CSS属性。整体来说QSS要⽐CSS更简单⼀些

注:如果通过QSS设置的样式和通过C++代码设置的样式冲突,但QSS优先级更⾼

基本语法:

选择器:对选中的控件进行各种属性的设置 

此外,给指定控件设置样式之后,该控件的⼦元素也会受到影响

设置全局样式:将界面上的样式集中设置

如果设置了全局样式,而某个控件中又设置了其他样式,那么这俩样式会叠加展现。此外当全局样式与局部样式冲突时,局部的优先级更高

以上样式代码和C++代码是混在一起的,两者分开能够降低维护的成本 

样式设置方法:

方法1:

  1. 创建qrc文件,通过qrc管理样式文件
  2. 创建单独的qss文件,将qss文件放入qrc中
  3. 编写C++代码,读取qss内容并设置样式

方法2:

  1. QT Designer中集成了该功能,允许将样式直接写到ui文件中。右击界面选择样式表即可编写样式,且左下角还有格式校验

样式设定方法太多也是种烦恼,这就容易导致某个控件的样式不符合预期,所以样式的统一设置就显得更有必要了。 

选择器

选择器
类型选择器 选择所有的QPushButton和其子类的控件
ID选择器 选择objectName为pushButton_2的控件
并集选择器 选择QPushButton,QLineEdit,QComboBox三种控件
类选择器 只会对选择的控件生效,不会对其子类生效

类型选择器不仅会对选择的控件生效还会对子类也产生影响

子控件选择器:

重新设置下拉按钮:创建qrc文件导入图标再代码设置

伪类选择器:

该选择器选中的不是控件,而是控件的状态。

鼠标悬放按钮上变色,代码示例: 

盒子模型:

 

  • Content矩形区域:存放控件内容,⽐如包含的⽂本/图标等
  •  Border矩形区域:控件的边框
  • Padding矩形区域:内边距,边框和内容之间的距离
  •  Margin矩形区域:外边距.边框到控件 geometry 返回的矩形边界的距离

默认情况下,外边距,内边距,边框宽度都是0

QSS属性
margin 设置四个方向的外边距
padding 设置四个方向的内边距
border-style 设置边框样式
border-width 设置边框粗细
boeder-color 边框颜色
border 复合属性

示例:

 

给按钮设置样式:

复选框:

自定义复选框

给输入框设置样式:

给列表框设置样式:

给菜单设置样式

登录界面: