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

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

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

Javascriptの使用

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

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

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

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

以下に、Javascriptのグローバル変数の使用手順を示す。

 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
    }
 }