QMLの基礎 - QMLとC++のバインディングのソースを表示

== 概要 ==
QMLとC++のバインディング手順を記載する。<br>
<br>
ここでは、Qt Creatorにおいて、Qt Quickの空のプロジェクトを作成した時に自動生成されるソースコードを元にする。<br>
<br><br>

== QMLからC++へアクセスする (推奨) ==
<code>setContextProperty</code>メソッドに<code>QObject</code>のインスタンスを渡して、QMLからC++のクラスメソッドを呼んでいる。<br>
 <syntaxhighlight lang="c++">
 // main.cppファイル
 
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
 #include "CMainWindow.h"
 
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 #endif
 
    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);
 
    // 追加
    CMainWindow MainWindow;
    engine.rootContext()->setContextProperty("MainWindow", &MainWindow);
 
    return app.exec();
 }
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="c++">
 // CMainWindow.hファイル
 
 #pragma once
 
 #include <QObject>
 #include <QString>
 
 class CMainWindow : public QObject
 {
    Q_OBJECT
 
    public:
       Q_INVOKABLE QString getTextFromCpp()
       {
          return QString("This is the text from C++");
       }
 };
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="qml">
 // main.qmlファイル
 
 import QtQuick 2.5
 import QtQuick.Window 2.2
 
 Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    // 追加
    Text {
        id: textMainMessage
        text: qsTr("ここにテキストが表示される")
 
        x: (parent.width / 2) - width / 2
        y: (parent.height / 2) - height / 2
        Layout.fillWidth: true
        Layout.fillHeight: true

        font.pixelSize: 15
        color: "#ffffff"
    }
 
    Button {
        id: mainWindowButton
        x: (parent.width / 2) - width / 2
        y: (parent.height / 2) + height / 2
        width: 120
        height: 35
        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
        text: qsTr("OK")
 
        Connections {
           target: mainWindowButton
           function onClicked() {
              let strMainMessage = MainWindow.getTextFromCpp();  // C++のメソッドを呼ぶ
              textMainMessage.text = strMainMessage;
           }
        }
    }
 }
 </syntaxhighlight>
<br><br>

== C++からQMLオブジェクトへアクセスする (非推奨) ==
<u>C++からQMLオブジェクトへのアクセスは、C++とQMLの独立性の観点から非推奨であることに注意する。</u><br>
<br>
ここでは、objectNameでアクセスする方法を記載する。(他にも様々な手順がある)<br>
<br>
まず、root要素へアクセスして、子要素である<code>Text</code>へQMLで定義する<code>objectName</code>でアクセスする。<br>
 <syntaxhighlight lang="c++">
 // main.cppファイル
 
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
 #include "CMainWindow.h"
 
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 #endif
 
    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);
 
    // 追加
    // ルートオブジェクトおよびmain.qmlに定義されているobjectName(textObject)のQMLオブジェクトへのアクセスを取得する
    QObject *rootObject = engine.rootObjects().first();
    QObject *qmlObject = rootObject->findChild<QObject*>("textObject");
 
    // QMLオブジェクトに対して、任意の値を設定する
    qmlObject->setProperty("text", "Text from C++");
 
    return app.exec();
 }
 </syntaxhighlight>
<br>
次に、QML側では、アクセスする子要素に<code>objectName</code>を定義する。<br>
 <syntaxhighlight lang="qml">
 // main.qmlファイル
 
 import QtQuick 2.5
 import QtQuick.Window 2.2
 
 Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    // 追加
    Text {
        id: textMainMessage
        objectName: "textObject"
        text: qsTr("ここにテキストが表示される")
 
        x: (parent.width / 2) - width / 2
        y: (parent.height / 2) - height / 2
        Layout.fillWidth: true
        Layout.fillHeight: true

        font.pixelSize: 15
        color: "#ffffff"
    }
 }
 </syntaxhighlight>
<br><br>


__FORCETOC__
[[カテゴリ:Qt]]