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)
此时再运行项目,点击按钮发现样式已经应用上了,如下图所示:
好了,完事了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库