Qt开发：如何加载资源文件

TechNomad

已于 2025-04-28 09:19:32 修改

阅读量982

点赞数 5

分类专栏： Qt初阶教程文章标签： qt

于 2025-04-26 23:45:57 首次发布

本文链接：https://blog.youkuaiyun.com/TechNomad/article/details/147544068

版权

Qt初阶教程专栏收录该内容

45 篇文章

订阅专栏

文章目录

一、加载图片资源

右键项目->选择"Add New…“之后，会弹出如下界面：
在这里插入图片描述
选择Qt->Qt Resource File即可。

点击下一步

点击上图中的LoadImageDemo.qrc文件，右边会显示如下界面：

点击"Add Prefix”->添加前缀

生成前缀之后；再点击“Add Files”；就可以把本地资源文件加载到项目中了。
在这里插入图片描述

加载图片

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QWidget>
#include <QLabel>

class MainWindow : public QWidget
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr) : QWidget(parent) {
        this->setFixedSize(800, 600);

        m_pImageLabel = new QLabel(this);
        m_pImageLabel->setFixedSize(200, 200);

        //m_pImageLabel->setStyleSheet("QLabel { background-image: url(:/MultiTexture/BrushStroke_Coloured_Variant_A.png); }");

        QPixmap pixmap(":/MultiTexture/BrushStroke_Coloured_Variant_A.png");
        m_pImageLabel->setPixmap(pixmap);
        m_pImageLabel->setScaledContents(true); // 可选，图片自动缩放到label大小
    }
    
private:
    QLabel *m_pImageLabel;
};
#endif // MAINWINDOW_H

输出结果：
在这里插入图片描述

二、QSS的使用介绍

QSS（Quick Style Sheet）是一种用于定义Qt应用程序样式的机制。Qt是一个跨平台的C++应用程序开发框架，而QSS则允许开发者使用类似于CSS（层叠样式表）的语法来定义Qt应用程序的外观和风格。

2. 1 QSS的基本语法
QSS的语法类似于CSS，通过设置属性和值的方式定义样式。例如：

QPushButton {
    background-color: lightblue;
    border: 2px solid darkblue;
    color: white;
}

这个例子定义了一个QPushButton（按钮）的样式，设置了背景颜色、边框和文本颜色。

2.2 样式选择器
与CSS类似，QSS也支持不同的选择器，可以根据控件的类型、名称、状态等来选择应用样式。

QLabel：选择所有标签控件。
QPushButton#myButton：选择具有id为“myButton”的QPushButton。
QLineEdit:focus：选择获得焦点的QLineEdit。

2.3 QSS的应用
在资源文件中设置：将QSS样式文件添加到Qt资源文件（.qrc）中，然后通过资源路径加载。
在代码中设置：

QApplication a(argc, argv);
QFile styleFile(":/stylesheets/style.qss");
styleFile.open(QFile::ReadOnly);
QString style = QLatin1String(styleFile.readAll());
a.setStyleSheet(style);

三、QSS的应用步骤与示例

3.1 QSS资源文件添加步骤
“右键项目” ---- “Add New…”, 选择 “Qt” ---- 再选择"Qt Resource File"
在这里插入图片描述
点击按钮"Choose…"后

添加前缀：

点击完成后，可以看到添加的资源文件如下图所示

将QSS文件加入资源中

3.2 QSS资源文件的使用
qss_style样式表内容：

/* 第一种 QPushButton - 蓝色风格按钮 */
QPushButton#btnBlue {
    color: white;
    background-color: #3498db;
    border: 2px solid #2980b9;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 16px;
}

QPushButton#btnBlue:hover {
    background-color: #5dade2;
}

QPushButton#btnBlue:pressed {
    background-color: #2e86c1;
}

/* 第二种 QPushButton - 红色警告按钮 */
QPushButton#btnRed {
    color: white;
    background-color: #e74c3c;
    border: 2px solid #c0392b;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 16px;
}

QPushButton#btnRed:hover {
    background-color: #ec7063;
}

QPushButton#btnRed:pressed {
    background-color: #cb4335;
}

/* 第一种 QLabel - 标题标签 */
QLabel#labelTitle {
    background-image: url(:/MultiTexture/BrushStroke_Coloured_Variant_A.png);
}

/* 第二种 QLabel - 小提示标签 */
QLabel#labelTip {
    background-image: url(:/MultiTexture/BrushStroke_Coloured_Variant_H.png);
}

加载 .qss 文件，比如在 main.cpp 里加：

#include "main_window.h"

#include <QApplication>
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QFile file(":/res/qss_style.qss"); // 假设放在资源文件中
    if (file.open(QFile::ReadOnly)) {
        QString styleSheet = QLatin1String(file.readAll());
        a.setStyleSheet(styleSheet);
    }

    MainWindow w;
    w.show();
    return a.exec();
}

如何使用QSS：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QWidget>
#include <QPushButton>
#include <QLabel>
#include <QHBoxLayout>

class MainWindow : public QWidget
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr) : QWidget(parent) {
        this->setFixedSize(800, 600);

        // 蓝色按钮
        QPushButton *btnBlue = new QPushButton("确认", this);
        btnBlue->setObjectName("btnBlue");

        // 红色按钮
        QPushButton *btnRed = new QPushButton("删除", this);
        btnRed->setObjectName("btnRed");

        // 标题标签
        QLabel *labelTitle = new QLabel(this);
        labelTitle->setObjectName("labelTitle");

        // 提示标签
        QLabel *labelTip = new QLabel(this);
        labelTip->setObjectName("labelTip");

        QHBoxLayout *pHBoxLayout = new QHBoxLayout(this);
        pHBoxLayout->addWidget(btnBlue);
        pHBoxLayout->addWidget(btnRed);
        pHBoxLayout->addWidget(labelTitle);
        pHBoxLayout->addWidget(labelTip);

    }

    ~MainWindow() {

    }
};
#endif // MAINWINDOW_H

输出结果：
在这里插入图片描述

四、ts文件的语法介绍和使用

4. 1 什么是 .ts 文件？
ts 文件是 Qt 的翻译文件，全名是 “Translation Source”。里面存放的是界面上的字符串原文（通常是英文或中文）和它们对应的翻译，比如英文翻译成中文。.ts 是一个XML格式的文件，里面是一条条的，每条表示一段文本的翻译。一般配合 Qt 的国际化机制使用，比如 tr() 函数。

4.2 .ts 文件的基本结构
来看一个最基本的 .ts 示例：

<?xml version="1.0" encoding="utf-8"?>
<TS version="2.1" language="zh_CN">
  <context>
    <name>MainWindow</name>  <!-- 类名、上下文名，方便区分不同窗口或模块 -->
    <message>
      <location filename="../mainwindow.cpp" line="15"/>  <!-- 源代码位置 -->
      <source>Hello World</source>  <!-- 原文（源语言） -->
      <translation>你好，世界</translation>  <!-- 译文（目标语言） -->
    </message>
    <message>
      <location filename="../mainwindow.cpp" line="20"/>
      <source>Exit</source>
      <translation>退出</translation>
    </message>
  </context>
</TS>

字段解释：

location 表示这个字符串在代码里的来源位置。filename 是源文件路径，比如 mainwindow.cpp；line 是所在的代码行号。
<TS> 是最外层，标记了版本和目标语言（比如 zh_CN）。
<context> 是上下文（通常对应你的类名，比如 MainWindow、LoginDialog）。
<name> 是类的名字。
<message> 是每条翻译记录。<source> 是原文。<translation> 是翻译后的文本。

4.3 每个字段的详细解释
在这里插入图片描述

4. 4 常见特殊情况
未翻译
如果某个文本还没有翻译完成，Qt 会生成：

<translation type="unfinished"></translation>

type=“unfinished” 表示这个翻译还没完成，Qt 运行时可能会回退使用原文。
翻译完成后，去掉 type=“unfinished”，或者用工具（如 Qt Linguist）修改。

标记需要翻译的代码
在 C++/Qt 代码里，要用专门的宏来标记需要翻译的文本，比如：

tr("Hello World");  // 用tr()宏

或者在一些 Qt 组件中自动支持（比如 QLabel 的 setText() 配合 tr()）。
**注意：**只有被 tr() 包裹的字符串，才会被 lupdate 提取进 .ts 文件！

特殊字符处理
如果原文里有一些特殊字符（比如 &, <, >），在 .ts 文件里会被转义：

& → &
< → <
> → >
引号" → "

所以翻译的时候注意不要漏掉这些转义！

4.4 常用命令和流程

五、如何添加ts文件

第一步

TRANSLATIONS += ch_simple.ts

保存，执行一次qmake。
注：ts文件是xml文件保存了需要翻译的信息。

第二步
选择菜单：工具->外部->Qt语言家->更新翻译。
在这里插入图片描述
可以看到项目目录下生成了ch_simple.ts文件。

第三步
使用Linguist（即Qt语言家）软件，打开ch_simple.ts文件进行翻译。翻译完成后点保存，然后执行发布翻译。即会在相同目录下生成projectName_zh.qm文件。
注意：qm文件是运行时需要的文件。
在这里插入图片描述
点击"另外发布为"生成qm文件即可。

六、程序中加载多语言 .qm 文件示例

需要翻译的代码如下：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QWidget>
#include <QLabel>

class MainWindow : public QWidget
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr) : QWidget(parent) {
        this->setFixedSize(800, 600);

        m_pLabelText = new QLabel(tr("hello world!"), this); 
    }

    ~MainWindow() {

    }

private:
    QLabel *m_pLabelText;
};
#endif // MAINWINDOW_H

.ts文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS>
<TS version="2.1" language="zh_CN">
	<context>
    	<name>MainWindow</name>
    	<message>
        	<location filename="mainwindow.cpp" line="15"/> <!-- line代表需要翻译文本的所在行数 -->
        	<source>hello world!</source>
        	<translation>你好，世界！</translation>
    	</message>
	</context>
</TS>

main函数调用：

#include "mainwindow.h"

#include <QApplication>
#include <QTranslator>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QTranslator translator;
    if (translator.load("./ch_simple.qm")) {  // 加载中文翻译文件
        a.installTranslator(&translator);  // 安装到应用
    }

    MainWindow w;
    w.show();
    return a.exec();
}