QML小白之加载qml文件方法入门

前言

虽然做QT开发一直使用的是QWidget，但是了解QML也有一段时间了，加之以前做过Javascript开发几个月时间，对Javascript有一定的基础，最近一直想学习下QML相关内容。
QML内容之多，想入门得有个契入点，我选择了*.qml文件的加载方式，对此做了个基本尝试。

---

一、qml加入qrc资源文件

如果不考虑发布后qml文件修改，能不用重新打包生效qml文件里面的改动，可以考虑把qml加入qrc资源文件，编译的时候就在.exe里。

二、动态加载qml

1.QtQuick工程

代码如下（示例）：

    QQmlApplicationEngine engine;
    const QUrl url(QUrl::fromLocalFile(QCoreApplication::applicationDirPath() + "\\main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

2.QWidget工程

代码如下（示例）：

.pro文件里记得添加

QT += widgets quickwidgets qml quick

.cpp里添加
#include<QQuickWidget>
#include <QDir>
#include <QUrl>

    QDir::setCurrent(QCoreApplication::applicationDirPath()); // 把程序运行目录设置为当前目录
    
    QQuickWidget* viewer = new QQuickWidget(this);

    viewer->move(100, 100);
    viewer->resize(300, 300);
    viewer->setResizeMode(QQuickWidget::SizeRootObjectToView);
    QUrl url(QUrl::fromLocalFile("pop.qml"));
    viewer->setSource(url);            // 是以Shadow的第一层目录为基点

    viewer->show();

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Rectangle {
    visible: true
    width: 1000
    height: 480

	Button {
		x: 10
		y: 10
		text: "Ok"
		onClicked: console.log("OK Button clicked....")
	}

	Button {
		x: 100
		y: 100
		text: "Cancel"
		onClicked: console.log("Cancel Button clicked....")
	}
}

该处使用的pop.qml文件里的内容就可以在打包exe后还可以编辑，且能及时生效，不用再打包exe。

---

3.打包exe

windeployqt *.exe -qmldir “源码路径”
以上就是今天要讲的内容，本文重点介绍了如何让exe和qml文件分离，即打包出exe后，还可以根据需要改变qml文件，不用重新打包exe，也可以让改动生效。