QSS入门文档

最新推荐文章于 2024-06-06 19:37:46 发布

LewGarben

最新推荐文章于 2024-06-06 19:37:46 发布

阅读量901

点赞数

文章标签： qt c++ css

本文链接：https://blog.csdn.net/qq_46017342/article/details/131037769

版权

什么是QSS？

QSS（Qt Style Sheets）是Qt框架中用于定义用户界面的样式表语言。它类似于CSS（Cascading Style Sheets），但有一些特定于Qt的扩展和功能。使用QSS，您可以轻松地自定义Qt应用程序的外观，包括窗口、小部件和控件的样式、颜色、字体和布局等。

QSS的基本语法

QSS的语法与CSS类似，主要由选择器和声明组成。选择器用于选择要应用样式的小部件或控件，而声明则定义了这些小部件或控件的样式属性。

以下是QSS的基本语法规则：

使用选择器来选择要应用样式的小部件或控件。选择器可以是小部件的类型、ID或类名。
使用大括号 {} 包围声明块。
在声明块中，每个声明由属性和值组成，用冒号 : 分隔。
每个声明以分号 ; 结束。
使用注释 /* */ 对样式表进行注释。
下面是一个简单的QSS样式表示例：

qss

QPushButton {
    background-color: red;
    color: white;
}

QLabel#myLabel {
    font-size: 16px;
    font-weight: bold;
}

QLineEdit.myClass {
    border: 1px solid gray;
}

在上面的示例中，我们分别定义了QPushButton、QLabel#myLabel和QLineEdit.myClass的样式。

QPushButton选择器选择所有的QPushButton小部件，并设置其背景色为红色，文本颜色为白色。
QLabel#myLabel选择器选择ID为myLabel的QLabel小部件，并设置其字体大小为16像素，字体粗细为粗体。
QLineEdit.myClass选择器选择类名为myClass的QLineEdit小部件，并设置其边框为灰色实线。

常用的QSS属性

尺寸和位置属性

width: 设置小部件的宽度。
height: 设置小部件的高度。
max-width: 设置小部件的最大宽度。
max-height: 设置小部件的最大高度。
min-width: 设置小部件的最小宽度。
min-height: 设置小部件的最小高度。
margin: 设置外边距。
padding: 设置内边距。
position: 设置小部件的位置，可以是static、relative、absolute等。
背景和颜色属性
background-color: 设置背景颜色。
background-image: 设置背景图片。
color: 设置文本颜色。

字体属性

font-family: 设置字体族。
font-size: 设置字体大小。
font-weight:设置字体粗细，可以是normal、bold、lighter等。
边框和边框样式属性
border: 设置边框样式。
border-color: 设置边框颜色。
border-width: 设置边框宽度。
border-style: 设置边框样式，可以是solid、dashed、dotted等。

布局属性

display: 设置小部件的显示方式，可以是block、inline等。
flex: 设置弹性布局。
flex-direction: 设置弹性容器的主轴方向。
justify-content: 设置弹性容器中项目在主轴上的对齐方式。
align-items: 设置弹性容器中项目在交叉轴上的对齐方式。

其他属性

opacity: 设置透明度。
visibility: 设置可见性，可以是visible、hidden等。
text-align: 设置文本对齐方式，可以是left、center、right等。
text-decoration: 设置文本修饰，可以是none、underline、overline等。
这只是QSS中一些常用的属性，您可以根据需要查阅更多属性和使用方式。

如何应用QSS样式

要在Qt应用程序中应用QSS样式，可以使用setStyleSheet()方法。这个方法可以应用样式表到单个小部件或整个应用程序。

以下是在Qt应用程序中使用QSS的示例代码：

#include <QApplication>
#include <QPushButton>

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

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

    button.show();

    return app.exec();
}