VisualStudio+qt+cmake添加资源文件qrc

一、概述

　　给Qt控件添加样式的时候需要用到Qt的qss。就像css一样可以把按钮变的比较漂亮。

　　设置方式有三种：

　　　　1.在代码中设置。ps：利用控件的setStyleSheet

this->setStyleSheet("QPushButton {"
    "background-color: #2E3648;" // 按钮背景色
    "font: bold 12;"    // 按钮字体
    "border-width: 1px;"    // 按钮边框线宽
    "border-radius: 18;" // 按钮边框圆角半径
    "color: white;"     // 按钮文字颜色
    "}");

　　　　2.在Qt的设计师界面手动设置（这个不做介绍，因为基本没怎么用过，项目中我也不会用这种方式）

　　　　3.编写qss文件，并使用qss文件。ps：本质上和第一种方式是一样的都是使用控件的setStyleSheet来设置，只是这种吧样式单独放的方式更加清晰明了

QPushButton {
    background-color: #0072C6;
    color: white;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font-size: 16px;
    padding: 6px;
}
QPushButton:hover {
    background-color: #148CD2;
}
QPushButton:pressed {
    background-color: #005CA3;
}

 

二、添加步骤

　　下面介绍第三种使用方式，即.qss文件单独存放

　　1.新建一个用户存放.qss文件的文件夹（可以是任意目录）

　　2.为QPushButton编写qss代码。即button.qss中的内容

QPushButton {
    background-color: #0072C6;
    color: white;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font-size: 16px;
    padding: 6px;
}
QPushButton:hover {
    background-color: #148CD2;
}
QPushButton:pressed {
    background-color: #005CA3;
}

　　3.自定义一个Button按钮，继承QPushButton，并把button.qss样式应用上去

#include "Button.h"
#include "../utils/StyleHelper.h"
#include <QDebug>

Button::Button(QWidget *parent)
    : QPushButton(parent)
{
    this->resize(80, 36);
    connect(this, &Button::clicked, [=] {//点击button按钮加载样式
        qDebug() << "this is clicked";
        QString css = StyleHelper::getStyleSheet(":/QtForOpenCV4Tool/common/qss/button.qss");
        this->setStyleSheet(css);
        });
}

Button::~Button()
{
}

　　上面的StyleHelper是一个加载qss文件内容的头文件工具类，目的是吧button.qss文件中的内容读取出来并放入QString中，方便设置到控件的setStyleSheet中。内容如下：

#include <QFile>
#include <QString>
#include <QDebug>

class StyleHelper {
public:
    static QString getStyleSheet(QString filePath) {
        qDebug() << filePath;
        //加载qss文件
        QFile qss(filePath);
        if (qss.open(QFile::ReadOnly)) {//打开
            qDebug() << "already open file";
            QString styleSheet = QLatin1String(qss.readAll());
            qDebug() << styleSheet;
            return styleSheet;
        }
        else {
            qDebug() << "could not open file";
        }
        return nullptr;
    }
};

　　4.使用按钮

?

1 2 3

Button *btn = new Button(this); btn->move(20, 20); btn->setText("点击按钮应用样式");

　　当运行上面代码，点击按钮后发现按钮毫无变化，即样式压根没应用上。

　　但是当你把button.qss换成绝对路径的时候button.qss样式又能应用上了。到此处为止只能用绝对路径加载.qss文件。相对路径团灭。

　　绝对路径这种方式太不方便了，那么要想使用相对路径加载.qss文件怎么办？答案是使用Qt的qrc资源文件，使用了它之后就可以方便的使用相对路径了。

　　5.创建Resource.qrc(使用vs的qt插件创建，qrc可以是任意位置)，步骤如下：

　　点击添加后会在根目录(我创建在了根目录，其实可以是任意目录创建)下创建一个Resource.qrc，如下图所示

　　双击Resource.qrc文件打开，打开效果如下

　　此时Resource.qrc的准备工作已经完成了，下面开始添加资源，以button.qss为例，添加一个资源。步骤如下：

 　　资源访问路径介绍，如下图：

 　　此时再运行项目，发现button.qss资源仍然无法加载。这是因为我创建的项目是VS+Qt+Cmake项目。既然创建了Resource.qrc文件，就需要再camke中指定它，但是我并没有指定。指定一下 就好。如下：

qt_add_executable(QtForOpenCV4Tool ${PROJECT_SOURCES} ../Resource.qrc)

 　　此时再运行项目，点击按钮发现样式已经应用上了，如下图所示：

 　　好了，完事了。