随笔 - 632  文章 - 17  评论 - 54  阅读 - 93万

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)

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

   好了,完事了。

 

posted on   飘杨......  阅读(1509)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示