qt样式表设置边框_QT样式表

QT样式表

一、QT样式表简介

1、QT样式表简介

QSS的主要功能是使界面的表现与界面的元素分离，使得设计皮肤与界面控件分离的软件成为可能。

QT样式表是允许用户定制widgets组件外观的强大机制，此外，子类化QStyle也可以定制widgets组件外观。QT样式表的概念、术语、语法很大程度上受到了CSS层叠样式表的影响。

样式表是使用QApplication::setStyleSheet()设置在应用程序或是使用QWidget::setStyleSheet()设置在具体组件及其子对象的文字说明。

例如，以下样式表指明QLineEdit使用黄色作为背景色，QCheckBox使用红色作为文本颜色。

QLineEdit { background: yellow }

QCheckBox { color: red }

对于这种定制，样式表比QPalette更强大。例如，要获取一个红色的按钮，可以设置QPushButton的QPalette::Button角色为红色。然而，这并不保证对所有的样式有效，因为样式的构造者会被不同平台的原则和本地的主题引擎所限制。

样式表可以实现那些很难或是不可能使用QPalette实现的所有定制。

如果想要某些强制字段为黄色背景，按钮为红色文字，或是绚丽的复选框，样式表可以完成。

2、QT样式表编程

A、在代码中直接设置QSS

QPushButton *button = new QPushButton(this);

button->setText("hello");

button->setStyleSheet("QPushButton{ color:blue}");

B、通过文件设置QSS

将QSS代码写入.qss文件

将.qss文件加入资源文件qrc.qrc中

在代码中读取QSS文件设置组件QSS

QPushButton *button = new QPushButton(this);

button->setText("hello");

QFile file(":/qss/dev.qss");

file.open(QIODevice::ReadOnly);

QString stylesheet = QLatin1String(file.readAll());

button->setStyleSheet(stylesheet);

file.close();

二、QT样式表语法

QT样式表的术语和语法规则与HTML CSS很相似。

1、样式规则

样式表由样式规则序列组成。样式规则由选择器和声明组成。选择器指定了那些组件受规则影响，声明指定了组件设置了哪些属性。例如：

QPushButton { color: red }

以上样式规则中，QPushButton是选择器，{ color: red }是声明。样式规则指定了QPushButton及其子类应使用红色作为前景色。

QT样式表大小写不敏感，除了类名、对象名、QT属性名是大小写敏感的。

多个选择器可以指定同一个声明，使用逗号分隔选择器。例如以下规则：

QPushButton, QLineEdit, QComboBox { color: red }

等效于三个规则：

QPushButton { color: red }

QLineEdit { color: red }

QComboBox { color: red }

样式规则的声明部分是一个“属性：值”对的链表。声明部分在{}内，不同的属性：值”对使用分号分隔。例如：

QPushButton { color: red; margin: 0px; color: rgb(85, 85, 85); font-family: 宋体, "Arial Narrow", arial, serif;">2、选择器的类型

到目前为止所有的例子使用的都是最简单的选择器类型。QT样式表支持CSS2定义的所有选择器。下表总结了最常用的选择器类型。

选择器

示例

说明

通用选择器

*

匹配所有的组件

类型选择器

QPushButton

匹配所有QPushButton机器子类的实例

属性选择器

QPushButton[flat="false"]

匹配所有QPushButton的属性flat为false的实例。属性分为静态属性和动态属性，静态属性可以通过Q_PROPERTY()来指定，动态属性可以使用setProperty来指定。

类选择器

.QPushButton

匹配QPushButton的实例，子类除外

ID选择器

QPushButton#okButton

匹配对象名为okButton的所有QPushButton实例

后代选择器

QDialog QPushButton

匹配QDialog后代的所有QPushButton实例

子选择器

QDialog > QPushButton

匹配QDialog子类对象QPushButton的所有实例

3、子控件选择器

对于样式复杂的组件，需要访问组件的子控件，如QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可以包含子控件来对组件的特定子控件应用规则。

QComboBox::drop-down { image: url(dropdown.png) }

以上规则会对所有QComboBox的下拉框应用样式规则。尽管双冒号：：很像CSS3的伪元素，但QT子控件选择器在概念上是不同的，有不同的级联语义。

子控件选择器通常根据另一个参考元素进行定位。参考元素可以是组件或是另一个子控件选择器。例如，QComboBox的::drop-down默认放置在QComboBox衬底矩形的右上角。::drop-down默认放置在::drop-down子控件选择器的内容矩形的中心。

可以使用subcontrol-origin属性改变原点矩形。例如，如果想要将drop-down放置在边界矩形而不是默认的衬底矩形，可以指定：

QComboBox {

margin-right: 20px;

}

QComboBox::drop-down {

subcontrol-origin: margin;

}

drop-down在边界矩形内的对齐方式通过subcontrol-position属性改变。宽属性和高属性用于控制子控件选择器的大小。注意，设置一幅图片会隐式地设置子控件选择器的大小。

相对定位方法(position：relative)允许子控件选择器的位置偏离它原来的位置。例如，当QComboBox的下拉按钮按下，想要一种被按下的效果可以通过指定如下实现：

QComboBox::down-arrow {

image: url(down_arrow.png);

}

QComboBox::down-arrow:pressed {

position: relative;

top: 1px; left: 1px;

}

绝对定位方法(position：absolute)允许子控件选择器的位置和大小的改变与参考元素有关。

一旦定位，就可以像组件那样使用盒子模型对其进行造型。

注意，像QComboBox和QScrollBar这样复杂的组件，如果有一个属性或是子控件选择器被定制，所有其他的属性或是子控件选择器也要必须被定制。

常用辅助控制器：

::indicator              单选框、复选框、可选菜单项或可选群组项的指示器

::menu-indicator         按钮的菜单指示器

::item                   菜单、菜单栏或状态栏项

::up-button              微调框或滚动条的向下按钮

::down-button            微调框或滚动条的向上按钮

::up-arrow               微调框、滚动条或标题视图的向上按钮

::down-arrow             微调框、滚动条或标题视图的向下按钮

::drop-down              组合框的下拉箭头

::title                  群组框的标题

4、伪选择器

选择器可能包含限制基于组件状态的规则应用的伪状态。伪状态出现在选择器的尾部，中间使用分号连接。例如，以下规则用于鼠标悬停在一个QPushButton上：

QPushButton:hover { color: white }

伪状态可以使用叹号取反，例如，以下规则用于鼠标不悬停在QRadioButton：

QRadioButton:!hover { color: red }

伪状态可以以逻辑与的方式连接使用，例如，以下规则应用于鼠标悬停在一个选中的QCheckBox上：

QCheckBox:hover:checked { color: white }

取反伪状态可以出现在伪状态链中。例如，以下规则用于鼠标悬停在一个QPsuButton上，但没有按下：

QPushButton:hover:!pressed { color: blue; }

如果需要，使用逗号可以将伪状态以逻辑或连接。

QCheckBox:hover, QCheckBox:checked { color: white }

伪状态可以结合子控件选择器使用：

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

常用状态：

:disabled                   禁用的窗口部件

:enabled                    启用的窗口部件

:focus                      窗口部件有输入焦点

:hover                      鼠标在窗口部件上悬停

:pressed                    鼠标按键点击窗口部件

:checked                    按钮已被选中

:unchecked                  按钮未被选中

:indeterminate              按钮被部分选中

:open                       窗口部件处于打开或扩展的状态

:closed                     窗口部件处于关闭或销毁状态

:on                         窗口部件的状态是on

:off                        窗口部件的状态是on

5、冲突处理

当多个样式规则使用多个值指定同一个属性时会产生冲突。

QPushButton#okButton { color: gray }

QPushButton { color: red }

以上两条规则匹配名为okButton的QPushButton实例，在color属性上有冲突。为了解决冲突，需要考虑选择器的特征。上例中，QPushButton#okButton比QPushButton要更具体，因为QPushButton#okButton指向单个的对象，而不是类的所有实例。

类似，伪选择器比未指定伪状态的选择器更具体。因而，以下样式表指定，当鼠标悬停在QPushButton上时，QPushButton的文本为白色，否则为红色。

QPushButton:hover { color: white }

QPushButton { color: red }

严谨一点应该是：

QPushButton:hover { color: white }

QPushButton:enabled { color: red }

如果鼠标悬停在按钮上，两个选择器有相同的特