当前位置：首页 > news >正文

QT-使用QSS美化UI界面

news 2025/6/30 14:08:00

一、QSS简介：

Qt Style Sheet：Qt样式表，用来自定义控件外观的一种机制，可以把他类比成CSS（CSS主要功能与最终目的都是能使界面的表现与界面的元素分离）。QSS机制使应用程序也能像web界面那样随意地改变外观。

二、QSS使用方法：

1. 创建目录和文件

新建一个back目录，用于存放背景图片。
新建一个file目录，用于存放QSS文件。
新建一个文件,并命名为myQss.qss，注意文件后缀为.qss。

2.创建资源文件

选择“File”->“New File or Project”,显示如下界面：
在这里插入图片描述
点击上图“choose”按钮，显示如下界面：

上图中，输入"qss",并点击“Next”按钮。可看到添加的资源文件，如下图所示：

3.新建Prefix为“/”的空文件夹

右键“qss.qrc”—“Add Prefix”
在这里插入图片描述
上图中输入“/”,并点击“OK”按钮。

4.添加qss文件和背景图片

右键“qss.qrc”,选择“Add Existing Directory”，如下图所示：
在这里插入图片描述
选择存放背景图片的back目录和存放qss文件的file目录,如下图所示：

此时，qss文件和背景文件成功加载到资源“qss.qrc”中，如下图所示：

三、QSS美化UI界面源码

1. myQss.qss源代码

功能：实现背景的添加和label控件字体的美化，源代码如下：

QWidget#centralwidget
{border-image:url(:/back/back1.jpg);border: 1px solid #32435E;border-radius: 5px;
}QLabel#label
{color:white;font-size:20pt;font-family:"Microsoft Yahei";font-style:itelic;font-weight:bold;/*加粗*/text-align: center;
}

2. Qt核心代码：

void setQss()
{QFile file(":/file/myQss.qss");file.open(QFile::ReadOnly);if(file.isOpen()){QString styleSheet = QLatin1String(file.readAll());ui->centralwidget->setStyleSheet(styleSheet);file.close();qDebug() << "success";}else{qDebug() << "error";}
}