將 C++ 中的自定義物件 myData 傳遞給 QML 使用

 需要做以下幾個步驟：

1. 確保 myData 是可以在 QML 中使用的對象：這意味著 C++ 類需要使用 Q_PROPERTY 或者是可以被 QML 認識的類型（例如 QObject 的派生類）。
2. 將 C++ 對象（例如 myData）設置為 QML 上下文屬性：這樣 QML 層就可以訪問 C++ 層的數據。

假設你有一個 MyData 類，並且想將它傳遞到 QML，下面是具體的實現步驟。

步驟 1: 定義 C++ 類

首先，我們需要定義 MyData 類，並確保它是 QML 可以使用的類型。如果你希望將數據傳遞給 QML，MyData 類最好繼承自 QObject，並使用 Q_PROPERTY 來公開屬性，這樣 QML 就能夠直接綁定和使用它。

例如：

#include <QObject>
#include <QSharedPointer>

class MyData : public QObject
{
    Q_OBJECT
    Q_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)

public:
    MyData() : m_value(42) {}

    int value() const { return m_value; }
    void setValue(int value) {
        if (m_value != value) {
            m_value = value;
            emit valueChanged();
        }
    }

signals:
    void valueChanged();

private:
    int m_value;
};

步驟 2: 創建 MyData 實例並設置為 QML 屬性

接下來，將 MyData 實例傳遞給 QML。你可以使用 QQmlContext::setContextProperty 將它設置為 QML 上下文屬性。

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QSharedPointer>

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

    // 創建 MyData 實例
    QSharedPointer<MyData> myData = QSharedPointer<MyData>::create();

    // 設置為 QML 上下文屬性
    engine.rootContext()->setContextProperty("myData", myData);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

步驟 3: 在 QML 中使用 myData

現在，你可以在 QML 中使用 myData 屬性。由於我們使用了 Q_PROPERTY，QML 可以直接訪問 MyData 類中的屬性。

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "QML and C++ Integration"

    Rectangle {
        width: parent.width
        height: parent.height

        Text {
            anchors.centerIn: parent
            text: "Value from C++: " + myData.value
            font.pixelSize: 24
        }

        Button {
            anchors.centerIn: parent
            text: "Change Value"
            onClicked: {
                myData.value = myData.value + 1  // 這將觸發 QML 的綁定
            }
        }
    }
}

關鍵點

1. Q_PROPERTY: 使得 value 屬性可以被 QML 綁定和操作。Q_PROPERTY 宣告會讓 QML 自動處理這些屬性的讀取、寫入和通知信號。

2. setContextProperty: 將 MyData 實例傳遞給 QML。這樣，QML 就能夠訪問並操作 C++ 層的 MyData 對象。

3. QML 綁定: QML 中的 myData.value 會自動綁定到 C++ 層的 value 屬性，並在值變更時更新。

結論

• MyData 類 需要繼承 QObject 並使用 Q_PROPERTY 標註其屬性。
• 將 myData 傳遞給 QML 可以使用 setContextProperty，讓 QML 層訪問它。
• QML 中的數據綁定 可以簡單地透過 QML 的屬性系統來實現，這樣 C++ 層的數據就能動態地反映到 QML 界面上。

在 Q_PROPERTY 宏中，屬性的名稱應該與提供的 getter 函數名稱對應。在你的代碼中，Q_PROPERTY(int xVal READ xVal WRITE setxVal NOTIFY xValChanged) 這行會告訴 QML xVal 屬性對應於 xVal 和 setxVal 函數