QML UI 与逻辑分开

前言

大多数开发者都希望创建一个可维护的应用程序，要达到该目的的方法之一就是将用户界面与业务逻辑分开，应用程序的 UI 应该用 QML 编写的几个原因如下：

声明性语言非常适合定义 UI
QML 代码编写很简单，因为它比 C++更简洁，并且不是强类型的。这也是使他成为原型的优秀语言。
JavaScript 可以很容易地在 QML 中用于响应事件。

作为一种强类型语言，C++最适合做应用程序的逻辑，通常，此类代码执行复杂计算或数据处理等任务，这些任务在 C++中比 QML 中更快。
Qt 提供了各种在应用程序中集成 QML 和 C++的方法，前面的文章也有介绍到。典型的用例就会在用户界面中显示数据列表，如果数据集是静态的，则用 QML 编写的模型就足够用了。
看以下示例，QML 编写的模型示例：

model: ListModel {
    ListElement { name: "Item 1" }
    ListElement { name: "Item 2" }
    ListElement { name: "Item 3" }
}

model: [ "Item 1", "Item 2", "Item 3" ]

model: 10

将 C++用于大型或经常修改的动态数据集。

与 C++中的 QML 交互

虽然 Qt 允许从 C++中操作 QML，但是不建议这样做，来看一个简化的例子。

从 QML 中提取引用

假设正在为设置页面编写 UI：

import QtQuick 2.12
import QtQuick.Controls 2.12

Page {
    Button {
        text: qsTr("Restore default settings")
    }
}

我们希望按钮在单击时使用 C++执行某些操作，我们知道 QML 中的对象可以像在 C++中一样发出变化信号，因此先给按钮定义一个 objectName，以便可以再 C++中找到它：

Button {
    objectName: "restoreDefaultsButton"
    text: qsTr("Restore default settings")
}

然后，在C ++中，我们找到该对象并连接到其变化信号：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QSettings>

class Backend : public QObject
{
    Q_OBJECT

public:
    Backend() {}

public slots:
    void restoreDefaults() {
        settings.setValue("loadLastProject", QVariant(false));
    }

private:
    QSettings settings;
};

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    Backend backend;

    QObject *rootObject = engine.rootObjects().first();
    QObject *restoreDefaultsButton = rootObject->findChild<QObject*>("restoreDefaultsButton");
    QObject::connect(restoreDefaultsButton, SIGNAL(clicked()),
        &backend, SLOT(restoreDefaults()));

    return app.exec();
}

#include "main.moc"

通过这种方法，对象的引用从QML中“拉出”。这里是C ++逻辑层依赖于QML表示层。如果我们以这样的方式重构QML，使得objectName更改或其他一些更改破坏了C ++找到QML对象的能力，那么我们的工作流程变得更加复杂和繁琐。

在 QML 中调用 C++逻辑

重构 QML 比重构 C++容易得多，因此为了维护更方便，我们应该尽可能保持 C++类型不去调用 QML，然后通过将对 C++的类型的引用注册到 QML 中来调用。

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    Backend backend;

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("backend", &backend);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

然后直接在 QML 中进行调用：

import QtQuick 2.12
import QtQuick.Controls 2.12

Page {
    Button {
        text: qsTr("Restore default settings")
        onClicked: backend.restoreDefaults()
    }
}

这种方式，如果将来需要重构 QML，C++将保持不变。
在上面示例中，我们根据上下文设置一个 context 属性，以将 C++对象公开给 QML 使用，这意味着属性可提供引擎加载的每个组件使用。对于必须在加载 QML 时必须可用且不能在 QML 中实例化的对象，上下文属性非常有用。
有关 C++类型公开给 QML 中使用的方法，之前的文章有介绍过，在这里。