QT样式表详解

本文详细介绍qt的样式表,包含样式表如何使用,常见语句和选择器。

背景说明

样式表用于设置外观,他是设置控件外观的方式之一。其他方式如下:

  1. 控件的成员函数,如QWidget::setBackground
  2. 样式表
  3. 调色板

优先级依次提高。调色板有最高优先级。

样式表

qt控件通过setsytlesheet(“样式表代码”)来使用样式表代码。QWidget::setstylesheet设置的qss代码作用域是设置它的控件以及其子控件。

下面是qss代码的一个举例

QPushButton {
    background-color: red;
}

这个代码的意思是把作用域的QPushButton控件的背景颜色设置为红色。

到底是哪个QPushButton的背景变成红色取决于谁调用了setstylesheet来应用这个样式表。如果是某个Qframe调用,则容器内所有的按钮背景都是红色,但其他Qframe中的按钮不受影响,因为setstylesheet的作用域只有调用它的QFrame以及QFrame中的子控件。如果是某个QPushButton调用,则只有这个QPushButton背景会变成红色,。

setsytlesheet函数使用示例

下面通过简单的例子来示意setstylesheet函数怎么用。

#include 
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QPushButton button("Click me!");
    button.setGeometry(100, 100, 200, 50);

    button.setStyleSheet("QPushButton {"
                          "    background-color: red;"
                          "}"
                          );

    button.show();

    return a.exec();
}

像这样,界面上那个调用了setStyleSheet的按钮背景颜色就变成红色了。

加载全局qss样式

我们可以在一个文件中描述所有界面上所有控件的样式。然后使用QApplication::setStyleSheet来应用全局样式。这样做的好处是分离功能和外观布局。外观布局用qss写,如果外观只是变个颜色,添加一个新的qss文件就行了,其他代码甚至都不用重新编译。下面就是加载全局样式的示例

#include 
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QFile file(":/style.qss");  // 加载 qss 文件
    if (file.open(QFile::ReadOnly | QFile::Text))
    {
        QString styleSheet = QString::fromUtf8(file.readAll());
        a.setStyleSheet(styleSheet);  // 应用样式表
        file.close();
    }

    // 创建窗口和控件等代码
    // ...

    return a.exec();
}

这样写的qss代码,作用域是整个 应用程序。其中代码写在了style.qss文件中。

样式表的作用域、选择器、语句概念

  • 作用域是指qss语句可能对哪些区域的控件进行设置,它取决于setStyleSheet在哪里被调用。
  • 作用域是明确的,一旦调用了setStyleSheet,作用域就确定了。
  • 作用域不体现在qss代码中。而体现在setStyleSheet的位置。
  • 选择器是指对作用域内的哪些控件进行设置。
  • 选择器是可选的,可以不存在选择器。

qss代码由选择器和语句构成,其中选择器不一定有,qss代码语法如下

选择器{
	语句1;
	语句2;
}

下面将介绍分别介绍语句和选择器

语句

语句用来描述控件的外观,需要记忆。
设置控件背景颜色:background-color: <颜色值>;
设置控件前景颜色:color: <颜色值>;
设置控件背景图片:background-image: url(<图片路径>);
设置背景图片平铺至整个控件区域,当控件大小发生变化时,背景图片也会跟着变化:background-image: url(<图片路径>);
设置背景图片居中显示,当控件大小发生变化时,背景图片不会跟着变化:background-image: url(<图片路径>) 0 0 no-repeat;
将背景图片平铺至整个控件区域,当控件大小发生变化时,背景图片会等比例拉伸:background-image: url(<图片路径>) 0 0 stretch;
设置控件背景重复方式:background-repeat: ;
设置控件背景位置:background-position: <水平位置> <垂直位置>;
设置控件大小:width: <宽度>; height: <高度>;
设置控件最小大小:min-width: <宽度>; min-height: <高度>;
设置控件最大大小:max-width: <宽度>; max-height: <高度>;
设置控件透明度:opacity: <透明度>;
设置控件的对齐方式:alignment: <左|右|中>;
设置控件的间距:spacing: <距离>;
设置控件的填充:margin: <上> <右> <下> <左>;
设置控件的边框:border: <宽度> <样式> <颜色>;
设置控件的边框颜色:border-color: <颜色>;
设置控件的边框样式:border-style: ;
设置控件的边框宽度:border-width: <宽度>;
设置控件的圆角半径:border-radius: <大小>;
设置控件的阴影:box-shadow: <位置> <大小> <颜色>;
设置控件的内边距:padding: <上> <右> <下> <左>;
设置控件的文本对齐方式:text-align: ;
设置控件的文本装饰:text-decoration: ;
设置控件的文本字间距:letter-spacing: <距离>;
设置控件的文本行间距:line-height: <大小>;
设置控件的字体:font: <字体>;
设置控件的字体大小:font-size: <大小>;
设置控件的字体颜色:color: <颜色>;
设置控件的字体加粗:font-weight: ;
设置控件的字体斜体:font-style: ;
设置控件的字体下划线:text-decoration: ;
设置控件的图标大小:icon-size: <宽度> <高度>;

选择器

选择器可以让我们定位到作用域里的某个或者某组控件,只设置这一个或者这一组控件的外观。比如作用域内上有好多按钮,我希望写一个qss,让一部分按钮的背景颜色是红色,另一部分是绿色。就需要用到选择器定位到那些有特殊要求的控件。

通用选择器

*{
	background-color: red;
}

* 就是通用选择器,它使得background-color: red作用于作用域内的所有控件。

类型选择器

选择指定的类及其子类

类名{
	语句;
}

QFrame{
	background-color: red;
}

选择的是作用域内的QFrame以及其子类如QLabel等。QPushButton不是QFrame的子类,所有不会被选择。

类选择器

区别于类型选择器,它只选择指定的类,而不选择其子类

.类名{
	语句;
}

.QFrame{
	background-color: red;
}

选择作用域内的QFrame,而其他类不受影响。

id选择器

----------------背景介绍-----------------------
控件可以通过setObjectName设置它的id。

QPushButton* bt1=new QPushButton();
bt1.setObjectName("button1");

----------------------------------------------------
选择指定id的控件。

#id{
	语句
}

#button1{
	background-color: red;
}

这样会把作用域内objectName为button1的所有控件背景颜色都设置成红色。

属性选择器

----------------背景介绍-----------------------
控件可以通过setProperty设置它的属性。

QPushButton* bt1=new QPushButton();
bt1.setProperty("level", "dangerous");

这样设置了bt1的level属性为dangerous
----------------------------------------------------
选择指定属性为指定值的控件

[属性名=属性值]{
	语句;
}

[level=dangerous]{
	background-color: red;
}

这样把作用域内所有level属性为dangerous的控件的背景颜色设置为了红色。

包含选择器

比较难描述定义,直接看示例吧

QFrame QPushButton {
    background: white;
}

这里使得QFrame下的QPushButton的背景颜色为白色。如果一个QPushButton不在某个QFrame中,是不会被选择的。
包含选择器可以不止两层,可以更多,比如QFrame下的QFrame下的QPushButton。

子元素选择器

选择一个控件的直接子控件。

父控件 > 子控件 {
	语句;
}

QFrame > QGroupBox {
    background: white;
}

选择QFrame下的QGroupBox,背景为白色,但不会影响QGroupBox的子控件。

伪类选择器

当控件处于某种状态时,选择它

控件名:[可选的“!”,!表示取反]状态{
	语句;
}

QCheckBox:!checked { 
color: red 
}

当QChectBox没有被选中时,它的颜色为红色。
常用状态

状态 说明
:disabled Widget 被禁用时
:enabled Widget 可使用时
:focus Widget 得到输入焦点
:hover 鼠标放到 Widget 上
:pressed 鼠标按下时
:checked 被选中时
:unchecked 未选中时
:has-children Item 有子 item,例如 QTreeView 的 item 有子 item 时
:has-siblings Item 有 兄弟,例如 QTreeView 的 item 有兄弟 item 时
:open 打开或展开状态,例如 QTreeView 的 item 展开,QPushButton 的菜单弹出时
:closed 关闭或者非展开状态
:on Widget 状态是可切换的(toggle), 在 on 状态
:off Widget 状态是可切换的(toggle), 在 off 状态

subcontrol选择器

选择控件的一部分。有些控件是由多个部分组成的,例如 QCheckBox 由 icon(indicator) 和 text 组成。

类名::部分{
	语句;
}

QCheckBox::indicator {
    width: 20px;
    height: 20px;
}
QCheckBox {
    spacing: 8px;
}

常用的控件部分

Subcontrol 说明
::indicator A QCheckBox, QRadioButton, checkable QMenu item, or a checkable QGroupBox’s indicator
::menu-indicator A QPushButton’s menu indicator
::item A QMenu, QMenuBar, or QStatusBar’s item
::up-button A QSpinBox or QScrollBar’s up button
::down-button A QSpinBox or QScrollBar’s down button
::up-arrow A QSpinBox, QScrollBar, or QHeaderView’s up arrow
::down-arrow A QSpinBox, QScrollBar, or QHeaderView’s down arrow
::drop-down A QComboBox’s drop-down arrow
::title A QGroupBox or QDockWidget’s title
::groove A QSlider’s groove
::chunk A QProgressBar’s progress chunk
::branch A QTreeView’s branch indicator

你可能感兴趣的:(c++qt,qt,开发语言)