Qt-QSS

最新推荐文章于 2024-09-10 11:32:56 发布

空凝眸_

最新推荐文章于 2024-09-10 11:32:56 发布

阅读量938

点赞数 16

分类专栏：跨平台开发_Qt 文章标签： qt

本文链接：https://blog.csdn.net/qq_36318563/article/details/140480302

版权

跨平台开发_Qt 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一简介

1. Qt 样式表(QSS)是一种类似于网页 CSS 的纯文本样式语言，专用于 Qt 应用程序的界面美化。QSS允许开发者通过简单的声明式规则来改变控件的颜色、字体、大小、布局等视觉属性，以此来美化界面。

2. QSS 中的注释语法为 /* ... */，不能使用 //

二语法

1. 选择器

1.1 功能：选择特定的控件进行修改。

1.2 类型

1. 类型选择器: 直接指定控件类型，例如 QPushButton 会应用于所有 QPushButton 控件。

2. ID选择器: 使用 #idName 来指定具有特定对象名称的控件，对象名称在整个界面中唯一，由 objectName 属性指定。

3. 类选择器: 使用 .className 来选择具有特定类的控件，类名在整个界面中不唯一，由 objectName 属性指定。

4. 属性选择器: 可以基于控件的属性值来选择控件，例如 QPushButton[text="OK"] 会选择文本为 "OK" 的按钮。

5. 通用选择器: * 选择所有控件。

6. 从属对象选择器：选择一个控件中内嵌的所有特定类型的子控件或后代控件，例如：QMainWindow QPushButton 会选择所有 QMainWindow 内部的 QPushButton，无论是直接从属还是间接从属

7. 子对象选择器：选择一个控件内直接从属于该控件的特定类型的子控件，例如：QGroupBox > QLabel 会选择直接内嵌于 QGroupBox 的 QLabel 控件

2. 声明

2.1 由多对属性:值; 组成，用于控制选择器选择的控件的样式。

2.2 举例：定制按钮

1. 选择所有 QPushButton 控件，设置背景色为浅蓝，文字颜色为白色，宽度为50，高度为100

QPushButton {
    background-color: lightblue;
    color: white;
    width: 100px;
    height: 50px;
}

3. 子控件列表

3.1功能：一些控件由多个元素组成，使用子控件列表可以选择这种控件的所有元素。例如整数选择器控件有一个显示界面和两个上下选择器组成。

3.2 举例：定制组合框

/* 整体组合框样式 */
QComboBox {
    border: 1px solid gray;
    padding: 2px 4px;
    min-width: 6em;
}

/* 组合框下拉按钮 */
QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
    border-left-width: 0px;
    border-left-color: darkgray;
    border-left-style: solid;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* 下拉按钮的箭头 */
QComboBox::down-arrow {
    image: url(:/images/down_arrow_icon.png); /* 替换为你的箭头图标路径 */
}

/* 编辑框部分 */
QComboBox::edit-field {
    border: none;
    padding: 2px;
    selection-background-color: darkgray;
}

/* 下拉列表项 */
QComboBox QAbstractItemView {
    border: 1px solid darkgray;
    selection-background-color: lightskyblue;
    selection-color: black;
}

4. 伪状态

4.1 功能：用来描述控件在特定条件下的状态，比如鼠标悬停、按下、禁用等。

4.2 常见的伪状态

1. 当鼠标悬停在控件上时的状态
:hover

2. 当控件被按下时的状态
:pressed

3. 控件处于可用状态
:enabled

4. 控件被禁用时的状态
:disabled

5. 控件获得焦点时的状态
:focus

6. 用于可切换控件（如复选框、单选按钮）被选中时的状态
:checked

4.3 举例：定制按钮的伪状态

/*定制按钮的样式*/
QPushButton {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #cccccc;
}

/*定制鼠标悬停时的背景色*/
QPushButton:hover {
    background-color: #f0f0f0;
}

/*定制按钮被按下时的被按下时的背景色和边框样式变为内凹*/
QPushButton:pressed {
    background-color: #d0d0d0;
    border-style: inset;
}

/*定制鼠标禁用时的文字颜色和背景色*/
QPushButton:disabled {
    color: #999999;
    background-color: #dddddd;
}

/*定制按钮失去焦点时的轮廓和获得焦点时的边框颜色*/
QPushButton:focus {
    outline: none; 
    border-color: blue; 
}

三设置样式表的方式

1. 通过控件的 setStyleSheet() 函数来定制样式

代码示例：

QPushButton *button = new QPushButton("Click me", this);

button->setStyleSheet("QPushButton {background-color: #ffaa00; color: white;}");

2. 通过 qApp 的 setStyleSheet() 函数加载外部的 qss 文件来定制全局样式

1. 创建 qss 文件，在 qss 文件中定义全局样式，例如：

/* styles.qss 示例内容 */
QPushButton {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

2. 加载 qss 文件

2.1 通过文件路径加载

// 假设 styles.qss 位于资源文件中
QFile file(":/styles/styles.qss");
if (file.open(QIODevice::ReadOnly | QIODevice::Text)) {
QString stylesheet = QLatin1String(file.readAll());
qApp->setStyleSheet(stylesheet);
file.close();
}

2.2 直接在构造函数中加载

// 或使用资源路径
QString styleSheet = QString("file:///path/to/your/styles.qss");
qApp->setStyleSheet(styleSheet);