c++ - 将自定义类(继承 QObject)传递给 QML 的最佳方式是什么？

Question

我已经将 Qt 用于 C++ 应用程序一段时间了，现在我想使用 QML 来完成我的下一个项目。我现在有以下情况:

• 红色:QML 文件和 QML 引擎
• blue:C++ 类

现在我希望能够从我的 QML 文件中调用 C++ 函数(绿色箭头)。

• Content.qml 需要从 WifiManager 读取属性
• LiveField.qml 和GameField.qml 需要显示/隐藏对应的C++ View

我在 View 中使用 C++，因为我在 QML 中不太熟悉一些沉重的 3D 内容(我只在 UI 菜单中使用 QML)。

我不想使用 qmlRegisterType 在我的 QML 代码中创建 C++ 类，因为我需要在我的 C++ 代码中进行一些初始化。

解决我的问题的最佳方法是什么？

Answer 1

C++ 对象通常使用 QQmlContext::setContextProperty 共享。您可以找到有关 QQmlContext 的更多信息 here .这使得您放入上下文中的任何对象(或值)都可以广泛使用。

不过要注意两点:

• 仅在高级组件中使用您的上下文属性，而不是在可重用的组件中，因为这将创建对这些值的直接依赖
• 在设置所有上下文属性后加载您的 GUI 时要小心，以确保从一开始您的 UI 就可以访问它们。

C++ 方面

#include "wifimanager.h"

// That one is required
#include <QGuiApplication>
#include <QQmlContext>
#include <QQmlApplicationEngine>   

void main() {
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;

    WifiManager wifi;
    engine.rootContext().setContextProperty("wifiManager", &wifi);

    engine.load(QUrl("qrc:/main.qml"));
    return app.exec();
}

然后您可以在 QML 端使用 wifiManager，以及它的 slots、Q_PROPERTYies 和 signals

读取 Q_PROPERTY

与常规 QML 一样，您现在可以绑定(bind)和读取对象的属性。

• 读取:var value = wifiManager.value
• 绑定(bind):someProperty:wifiManager.value

只要您发出关联的 NOTIFY 信号，只要值发生变化，任何 QML 绑定(bind)都会自动重新求值。例如:

Q_PROPERTY(QString ssid READ ssid WRITE setSsid NOTIFY ssidChanged)

Text {
    // Calls the READ getter of your Q_PROPERTY
    // Will automatically update whenever the SSID changes
    text: wifiManager.ssid
}

写一个 Q_PROPERTY

就像读取值一样简单，您可以通过执行 wifiManager.ssid = xxx

写入它

Button {
    text: "Reset SSID"
    onClicked: {
        // Calls the WRITE setter of your Q_PROPERTY
        wifiManager.ssid = ""
    }
}

处理信号

可以使用Connections 对象处理信号。对于任何 QML 对象，您必须在信号名称前加上 on 和一个大写字母。这为信号 void wifiConnected();

提供了 onWifiConnected:{}

Connections {
    target: wifiManager
    // Handle `wifiConnected` signal
    onWifiConnected: {
        console.log("Connected!")

        // If your `wifiConnected` signal has an argument named `ip`
        // it will be available here under the same name
        console.log("My IP is", ip)
    }
}

调用槽

插槽和 Q_INVOKABLE 可以像 javascript 中的任何其他函数一样访问。所以你可以调用 wifiManager.disconnect()

Button {
    text: "disconnect"
    onClicked: {
        // Calls the `disconnect` slot or Q_INVOKABLE
        wifiManager.disconnect()
    }
}