【嵌入式——QT】样式表自定义界面

QT样式表

QT样式表是用于定制用户界面的强有力的机制,其概念和术语是受到HTML中的级联样式表启发而来的,只是Qt样式表是应用于窗体界面的,Qt的样式表是纯文本的格式定义,在应用程序运行时可以载入和解析这些样式定义。

QT样式表语法

选择器

Qt样式表包含一系列的样式法则,一个样式法则由一个选择器(selector)和一些声明(declaration)组成。

QPlatinTextEdit就是选择器,表名后面花括号里的样声明应用于QPlatinTextEdit类及其子类。
样式声明部分是样式法则列表,每个样式法则由属性和值组成,每条法则用分号结束,每条样式法则由“属性:值”构成。
例如 font : 12pt “仿宋”。

QPlatinTextEdit{
    font : 12pt "仿宋";
}

通用选择器
*:所有组件;

类型选择器
QPushButton:所有QPushButton类及其子类的组件;

属性选择器
QPushButton[flat=“false”]:所有flat属性为false的QPushButton类及其子类的组件;

非子类选择器
.QPushButton:所有QPushButton类的组件,但是不包括QPushButton的子类;

ID选择器
QPushButton#btnOK:ObjectName为btnOk的QPushButton实例;

从属对象选择器
QDialog QPushButton:所有从属于QDialog的QPushButton类的实例,即QDialog对话框里的所有QPushButton;

子对象选择器
QDialog > QPushButton:所有直接从属于QDialog的QPushButton类的实例;

组合使用

QLabel,QCheckBox, QRadioButton {
    color: #272727;
}

子控件

对于一些组合的界面组件,需要对其子控件进行选择,如QComboBox的下拉按钮。

QComboBox::down-arrow {
    image: url(:/images/Resource/images/go-down-symbolic.symbolic.png); /*Adawaita icon thene*/
}

常用的子控件

  • ::branch:QTreeView的分支指示器
  • ::chunk:QProgressBar的进度显示块
  • ::close-button:QDockWidget或QTabBar页面的关闭按钮
  • ::down-arrow:QComboBox,QHeaderView,QScrollBar,QSpinBox的下拉箭头
  • ::down-button:QScrollBar,QSpinBox的向下按钮
  • ::drop-down:QComboBox的下拉按钮
  • :float-button:QDockWidget的浮动按钮
  • ::groove:QSlider的凹槽
  • ::indicator:QAbstraceItemView,QCheckBox,QRadioButton,可勾选的QMenu菜单项,可勾选的QGroupBox的指示器
  • ::handle:QScrollBar,QSplitter,QSlider的滑块
  • ::icon:QAbstraceItemView,QMenu的图标
  • ::item:QAbstraceItemView,QMenuBar,QMenu,QStatusBar的一个项
  • ::left-arrow:QScrollBar向左箭头
  • ::menu-arrow:具有下拉菜单的QToolButton的下拉箭头
  • ::menu-button:QToolButton的菜单按钮
  • ::menu-indicator:QPushButton的菜单指示器
  • ::right-arrow:QMenu或QScrollBar的右侧箭头
  • ::pane:QTabWidget的面板
  • ::scroller:QMenu,QTabBar的卷轴
  • ::section:QHeaderView的分段
  • ::separator:QMenu,QMainWindow的分隔器
  • ::tab:QTabBar,QToolBox的分页
  • ::tab-bar:QTabWidget的分页条,只用于控制QTabBar在QTabWidget中的位置,定义分页的样式使用
  • ::tab:子控件

伪状态

选择器可以包含伪状态,使得样式法则只能应用于界面组件的某个状态,也就是一种条件应用法则,
伪状态出现在选择器的后面,用一个冒号(:)隔开.

QComboBox::down-arrow {
    image: url(:/images/Resource/images/go-down-symbolic.symbolic.png); 
}
  • ::active:部件处于活动的状态
  • ::adjoins-item:当QTreeView的::branch:与某个item相邻时,将设置此状态
  • ::alternate:如果设置了QAbstractItemView::alternatingRowColors(true)隔行变色,那么设置隔行的item
  • ::bottom、:top、:left、right:QTabWidget的置在不同方向时的tab状态(tab可设置在上下左右四个方向,默认是在上方)
  • ::checked:项目被选中的状态。
  • ::closable:项目处于可以关闭的状态,QDockWidget启用了QDockWidget::DockWidgetClosable功能
  • ::closed:项目处于的关闭状态。如QTreeView中的非展开项
  • ::default:控件的默认状态
  • ::disabled:禁用状态
  • ::editable:QComboBox的可编辑状态
  • ::enabled:可用状态 :exclusive QMenu独占状态,多个菜单只能同时选中一个时的状态
  • ::first:QTabBar的第一个标签
  • ::flat:按钮扁平状态
  • ::floatable:项目处于浮动状态
  • ::focus:项目获取了焦点
  • ::has-children:项目有子项目
  • ::has-siblings:项目有同级项的项目
  • ::horizontal、:vertical:项目是水平、垂直方向的
  • ::hover:鼠标悬浮在项目上面
  • ::indeterminate:不确定状态
  • ::last:QTabBar的最后一个标签
  • ::middle:QTabBar中间的标签

属性

Qt样式表内对每一个选择器可定义多条样式规则,每个规则是一个"属性:值"对,Qt样式表中可定义的属性很多,可以在帮助文件中查找"Qt Style Sheets Reference"查看所有属性的详细说明.
Qt Style Sheets Reference

示例

QSpinBox::down-button { left: 2px }

*{ lineedit-password-character: 9679 }

QLineEdit { margin: 2px }

QSpinBox { max-height: 24px }

QComboBox { min-height: 24px }

QMessageBox { messagebox-text-interaction-flags: 5 }

QLineEdit { padding: 3px }

03-27 22:17