QMLの基礎 - 変数

グローバル変数

シングルトンオブジェクトの使用

シングルトンオブジェクトの使用は、Qt5.0から採用している。

まず、シングルトンオブジェクトを作成する。
以下の例では、Style.qmlファイルとしている。

 // Style.qmlファイル
 
 pragma Singleton
 
 import QtQuick 2.15
 
 QtObject {
    property color mainbg: 'red'
 }

次に、qmldirファイルを作成する。
qmldirファイルは、シングルトンのqmlファイル（上記の例では、Style.qml）と同階層のディレクトリに配置、または、相対パスで指定する必要がある。
また、qrcリソースファイルにqmldirファイルをインクルードする必要な場合もある。

 // qmldirファイル
 
 singleton Style Style.qml  // singleton <定義名> <QML定義ファイル>

以下に、シングルトンオブジェクトが定義されたQML定義ファイルの使用手順を示す。
同階層のディレクトリにあるシングルトンオブジェクトを参照する場合でも、ディレクトリのimport文が必要である。
同階層のディレクトリの場合は、import "."を使用すること。

 import QtQuick 2.15
 import "."  // 同階層のディレクトリにあるシングルトンオブジェクトを参照する場合
 
 Rectangle {
    color: Style.mainbg  // シングルトンオブジェクト
    width: 240
    height 160
 }

または、import文を使用せずに、.proファイルのRESOURCESに、QML定義ファイルとqmldirファイルを追加することでも可能である。

 RESOURCES += \
              qml.qrc \
              Style.qml \
              qmldir

Javascriptの使用

プロパティバインディングが不要な場合（値が定数で、変更時に通知する必要がない場合）は、以下のように、Javascriptの共有ライブラリで定義する。

ただし、この方法では型付けが無いため、様々なオブジェクトを代入することができる。
また、グローバル変数を変更した場合、それを使用しているアイテムは変更について通知されずに古い値を維持することに注意すること。

 // MyGlobalVariables.js
 
 .pragma library
 
 var hoge = 100;

以下に、Javascriptのグローバル変数の使用手順を示す。
asを使用して別名を付ける場合、別名の頭文字は大文字にする必要がある。

 import "MyGlobalVariables.js" as Variables
 
 Rectangle {
    width: Variables.hoge
    height: Variables.hoge
 }

Javascriptを使用する方法では、そのプロパティを使用する全てのファイルにインポートすることができる。

 // MyGlobalVariables.jsファイル
 
 // 注意
 // 複数のqmlファイルからこの変数を変更する場合、.pragma libraryのみが必要となる
 
 .pragma library
 
 var globalVariable = 20;

 import "MyGlobalVariables.js" as Variables
 
 Rectangle {
    id: main
    width: 300
    height: 400
 
    Component.onCompleted: {
       console.log(Variables.globalVariable);
 
       // グローバル変数の値の変更
       Variables.globalVariable = 5
    }
 }

QQmlEngineクラスのrootContextの使用

型のチェック、バインディング、変更の通知が必要な場合は、main.qmlファイル等のルートオブジェクトに定義することにより、どこからでもアクセスできるようになる。
これは、ルートオブジェクトはQQmlContextクラスのオブジェクトに直接登録されるからである。

QQmlEngineクラスのrootContextメソッドにcontextObjectを設定することにより、
そのQObjectの派生クラスが提供しているスロットやQ_INVOKABLEが付加されたメソッドをQMLファイルから実行することができる。

 RESOURCES = \
             qml.qrc \
             main.js

 // main.cppファイル
 
 #include <QCoreApplication>
 #include <QQmlApplicationEngine>
 #include <QQmlContext>
 #include "GlobalContext.h"
 
 int main(int argc, char *argv[])
 {
    QCoreApplication app(argc, argv);
 
    QQmlApplicationEngine engine;
 
    // コンテキストオブジェクト(GlobalContextクラス)の設定
    engine.rootContext()->setContextObject(new GlobalContext(&app));
 
    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);
 
    return app.exec();
 }

 // GlobalContext.cppファイル
 
 #include "GlobalContext.h"
 
 GlobalContext::GlobalContext(QObject *parent) : QObject(parent)
 {
 }
 
 void GlobalContext::MyFunction(const QString &arg)
 {
    qInfo() << Q_FUNC_INFO << arg;
 }

 // GlobalContext.hファイル
 
 #include <QDebug>
 
 class GlobalContext : public QObject
 {
    Q_OBJECT
 
 public:
    explicit GlobalContext(QObject *parent);
 
    Q_INVOKABLE void MyFunction(const QString &arg);
 };

 // main.qmlファイル
 
 import QtQml 2.15
 import 'main.js' as Script
 
 QtObject {
    Component.onCompleted: {
       MyFunction('from QML')
       Script.run()
       Qt.quit()
    }
 }

 // main.jsファイル
 
 function run() {
    // Javascriptからコンテキストオブジェクト(GlobalContextクラス)のメソッドを呼ぶ
    MyFunction('from JavaScript')
 }