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 中使用的方法，之前的文章有介绍过，​​​在这里​​。