Qt 实战（11）样式表 | 11.2、使用样式表

在Qt框架中，样式表（Style Sheets）是一种功能强大的工具，它允许开发者以一种简洁而高效的方式自定义应用程序的用户界面。Qt样式表借鉴了Web开发中CSS的概念，使得开发者能够轻松调整组件的外观，包括颜色、字体、边框、边距等。本文将详细介绍如何使用Qt样式表来美化应用程序界面。

一、使用样式表

1、盒子模型

Qt样式表的盒子模型（Box Model）是一种用于描述Qt组件（widgets）布局和尺寸的概念框架。它借鉴了Web开发中CSS的盒子模型，使得Qt开发者能够以统一和直观的方式管理组件的外观和布局。盒子模型由以下几个关键部分组成：

• 内容区域（Content ）： 这是组件的实际显示区域，例如按钮的标签、文本框的文本等。
• 填衬（Padding）： 填衬是围绕内容区域的内边距，用于在内容和边框之间提供空间。填衬可以是均匀的，也可以针对每个方向（上、右、下、左）单独设置。
• 边框（Border）： 边框是围绕填衬和内容区域的边界线，用于定义组件的边界和外观。边框的宽度、样式（如实线、虚线、点线等）和颜色都可以自定义。
• 边距（Margin）： 边距是组件外部的空间，用于在组件与其他组件或容器边界之间提供距离。边距同样可以是均匀的，也可以针对每个方向单独设置。

2、应用样式表

Qt样式表可以通过多种方式应用到应用程序中：

2.1、全局应用

使用QApplication::setStyleSheet()函数，将样式表应用到整个应用程序。

QApplication app(argc, argv);  
app.setStyleSheet("QPushButton { background-color: lightblue; color: darkblue; font-size: 16px; }");

2.2、局部应用

使用QWidget::setStyleSheet()函数，将样式表应用到特定的窗口或组件。

QPushButton *button = new QPushButton("Click Me", this);  
button->setStyleSheet("background-color: lightgreen; color: darkgreen;");

2.3、通过文件应用

将样式表定义保存为.qss文件，然后在程序中读取该文件并应用样式表。

• 创建.qss文件：

新建一个style1.qss文件，放在工程目录下，文件内容如下：

QPushButton
{
    border-radius:5px;
    background:rgb(150, 190, 60);
    color:red;
    font-size:15px;
}

style1.qss文件与resource.qrc文件目录结构如下：

工程目录--
 - resource.qrc
 - style1.qss

在resource.qrc文件中配置style1.qss文件信息，如下：

<RCC>
    <qresource prefix="/qss">
        <file>style1.qss</file>
    </qresource>
</RCC>

• 代码中使用.qss文件：

QPushButton *button = new QPushButton("Click Me", this);
QFile file(":/qss/style1.qss");
if (file.open(QFile::ReadOnly | QFile::Text)) {
    QTextStream ts(&file);
    button->setStyleSheet(ts.readAll());
}

3、使用样式表实现换肤

以下是一个具体的示例，展示如何在Qt中使用样式表实现换肤功能。

• 添加控件和布局：

在mainwindow.ui文件中，添加一个QPushButton用于切换样式表，以及一个QLabel用于显示一些文本，以便可以看到样式表的变化。代码如下：

#include "mainwindow.h"  
#include "ui_mainwindow.h"  
#include <QFile>  
#include <QTextStream>  
#include <QMessageBox>  
  
MainWindow::MainWindow(QWidget *parent)  
    : QMainWindow(parent)  
    , ui(new Ui::MainWindow)  
{  
    ui->setupUi(this);  
  
    // 加载默认样式表  
    loadStyleSheet("default.qss");  
  
    // 连接按钮点击信号到槽函数  
    connect(ui->changeSkinButton, &QPushButton::clicked, this, &MainWindow::changeSkin);  
}  
  
MainWindow::~MainWindow()  
{  
    delete ui;  
}  
  
void MainWindow::loadStyleSheet(const QString &styleSheetName)  
{  
    QFile file(":/qss/" + styleSheetName);  
    if (!file.open(QIODevice::ReadOnly | QIODevice::Text)) {  
        QMessageBox::warning(this, tr("Warning"), tr("Unable to open %1.").arg(styleSheetName));  
        return;  
    }  
  
    QTextStream in(&file);  
    QString styleSheet = in.readAll();  
    this->setStyleSheet(styleSheet);  
}  
  
void MainWindow::changeSkin()  
{  
    // 切换样式表，这里简单地在两个样式表之间切换  
    static bool isDefault = true;  
    if (isDefault) {  
        loadStyleSheet("dark.qss");  
    } else {  
        loadStyleSheet("default.qss");  
    }  
    isDefault = !isDefault;  
}

• 创建样式表文件：

在项目的资源文件（通常是qrc文件）中，添加两个样式表文件default.qss和dark.qss。

default.qss

QWidget {  
    background-color: white;  
    color: black;  
    font-size: 16px;  
}  
  
QPushButton {  
    background-color: lightgray;  
    border: 2px solid gray;  
    padding: 5px;  
    border-radius: 5px;  
}  
  
QPushButton:hover {  
    background-color: gray;  
    color: white;  
}  
  
QLabel {  
    margin: 20px;  
}

dark.qss

QWidget {  
    background-color: #333333;  
    color: white;  
    font-size: 16px;  
}  
  
QPushButton {  
    background-color: #666666;  
    border: 2px solid #888888;  
    padding: 5px;  
    border-radius: 5px;  
}  
  
QPushButton:hover {  
    background-color: #888888;  
    color: #cccccc;  
}  
  
QLabel {  
    margin: 20px;  
}

• 配置资源文件：

配置资源文件，确保资源文件包含样式表文件。例如：

<RCC>
    <qresource prefix="/qss">
        <file>default.qss</file>
		<file>dark.qss</file>
    </qresource>
</RCC>