【QML】在main.qml 文件中引入自定义 qml 文件

在设计 qml 界面时，我想把一组通用参数单独保存到一个自定义的 qml 文件中，方便参数统一调整。使用的 qrc 统一管理这些 qml 文件。

• 工程搭建：cmake 3.29 （cmake 引入qml 的环境搭建可参考：cmake 引入 qml）
• 编译平台：Clion
• 工程结构：
  • 

---

目录

一、QML 文件管理

1、resource.qrc

2、CommonParam.qml

3、mainwindow.qml

二、C++ 工程搭建及测试

1、CMakeLists.txt

2、main.cpp（测试）

---

一、QML 文件管理

1、resource.qrc

.qrc 文件是 Qt 中用于管理资源文件的一种方式，它可以将项目中用到的资源文件，如图片、QML 文件、样式表等，打包到一个二进制文件中，方便在程序中进行管理和使用。

• <qresource> 可以看做是一个资源集合，prefix 则是为这类集合所起的名字。
• <file> 记录当前资源集合中的具体文件的相对路径（相对于 qrc 文件）

<RCC>
    <qresource prefix="/qml">
        <file>mainwindow.qml</file>
         <!-- common/CommonParam.qml 表示common目录下的CommonParam.qml文件 -->
        <file>common/CommonParam.qml</file>
    </qresource>
    <!--
    <qresource prefix="/image">
        <file>background.png</file>
    </qresource>
    -->
</RCC>

2、CommonParam.qml

这是保存一些公共参数的文件。

import QtQuick 2.0

QtObject {
    property int inputWidth: 200
    property int inputHeight: 50
}

3、mainwindow.qml

这是窗口显示文件，我们将在这个文件中引入 CommonParam.qml。qml 文件可类比于 C++ 中的类，需要先引入，然后再实例化。

第一步是通过 import 引入 CommonParam.qml 所在目录。url 格式如下，表示通过 qrc 访问 <prefix> 类别下的 <file> 文件。

qrc: <prefix>/<file>

import 引入的是目录，而并非文件，因此具体引入方式如下：

// 访问路径: qrc:/qml/common/CommonParam.qml 
import "qrc:/qml/common"

第二步是实例化。qml 文件可类比于 C++ 中的类，现在 qrc 可以找到对应的 qml 文件，实际使用需要将其实例化。实例化的对象名为 commonParam，可以在当前文件中的任意位置通过对象名访问 commonParam 内部的属性。

CommonParam {
    id: commonParam
}

Rectangle {
    id: rect
    width: commonParam.width
    height: commonParam.height
}

完整示例：

import QtQuick 2.2
import QtQuick.Controls 1.2
import "qrc:/qml/common"

ApplicationWindow {
    width: 1200
    height: 800
    visible: true

    CommonParam {
        id: commonParam
    }

    Rectangle {
        id: rect
        width: commonParam.width
        height: commonParam.height
    }
}

二、C++ 工程搭建及测试

1、CMakeLists.txt

具体内容参考搭建QML环境时的CMakeLists.txt，需要改动的地方是，qrc 文件的位置。

2、main.cpp（测试）

mainwindow.qml 需要借助 C++ 主函数来运行。

#include <QtWidgets/QApplication>
#include <QtQml/QQmlApplicationEngine>

int main(int argc, char** argv)
{
    QApplication app(argc, argv);
	QQmlApplicationEngine engine;

	// 加载QML文件（加载主窗口）
    // 格式: qrc: + <prefix> + <file>
    // <prefix>: 自主分类，如/qml 表示qml文件，/image 表示图片资源
    // <file>: qml文件的相对路径(相对于qrc文件)
	engine.load(QUrl(QStringLiteral("qrc:/qml/mainwindow.qml")));
	if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}