文章目录
- 一、使用样式表
- 1、盒子模型
- 2、应用样式表
- 2.1、全局应用
- 2.2、局部应用
- 2.3、通过文件应用
- 3、使用样式表实现换肤
前言：
在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>
