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

QT-使用QSS美化UI界面

article 2025/1/20 21:13:07

一、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";
    }
}