QML - QML實時預覽 Qml Live Loader

項目地址 - 碼雲

Qml Live Loader

簡單的預覽工具.

發布程序時最好鏈接上所有 Qml module, 以 Windows 為例:

windeployqt D:\QtRepository\qmlliveloader\win-deploy -qmldir D:\Qt\5.15.0\mingw81_64\qml

注意: 導入的 qml 文件根組件必須是 Window 或 ApplicationWindow, 並且所有 qml 文件都位於主 qml 文件所在的文件夾及其子文件夾中.

Qml Live Engine

Qml live loader 一個很大的問題是只能預覽純 QML 文檔, 不支持第三方項目中的 C++ 接口. 目前我的解決方案是將其修改后編譯到第三方項目中, 需要做的修改如下:

1. 將下列文件導入項目

qmlliveengine.h
qmlliveengine.cpp
live.qml

2. 修改 main.cpp

Qt Creator 默認生成的 main.cpp 內容為

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/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);

    return app.exec();
}

QmlLiveEngine 繼承自 QQmlApplicationEngine, 因此可以直接將 QQmlApplicationEngine 替換為 QmlLiveEngine.

要使用 Live, 需要啟用 hot load, 並且必須用絕對路徑而不是 qrc 鏈接:

#include <QGuiApplication>
#include "qmlliveengine.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QmlLiveEngine engine;
    engine.hotLoad("/path/to/main.qml");

    return app.exec();
}

這里假定所有 qml 文件都在主 qml 文件所在的文件夾及其子文件夾中, 並且 live.qml 和主 qml 文件處於同級文件夾中.

另外, 由於 Qt Creator 自帶的輸出窗口顯示效果不好, Live engine 默認將 console message 重定向至 live 窗口. 要使用自帶的輸出窗口, 只需要改為:

engine.hotLoad("/path/to/main.qml", false);

Reference

Live Reloading or Hot Reloading with QML - qml.guide