QML はマルチパラダイム言語であり、オブジェクトの属性や、他のオブジェクトの 変化に対するオブジェクトの関係や反応を定義することができます。純粋に命令的なコードでは、プロパティや動作の変更を一連のステートメントで表現し、 それを段階的に処理していきますが、QML の宣言的なシンタックスでは、属性や動作の 変更を個々のオブジェクトの定義に直接組み込むことができます。複雑なカスタムアプリケーションの動作が必要な場合には、これらのプロパティ定義に命令コードを含めることもできます。

QML エンジンは、QMLドキュメントを通してソースコードを読み込みます。これらの QML ドキュメントを使用して、アプリケーション全体で再利用できるQML オブジェクトの型を定義します。

インポート文

QML文書では、ファイルの先頭に1つ以上のインポートを記述することができます。

様々なインポートの一般的な形式は以下の通りです：

• import <ModuleIdentifier> [as <Qualifier>]

例

import QtQuick
import QtQuick.Controls
import QtQuick as CoreItems

QMLのインポートについての詳細は、import文を参照してください。

オブジェクト宣言

構文的には、QMLコードのブロックはQMLオブジェクトのツリーを定義します。オブジェクトの定義には、オブジェクトの種類やプロパティを記述するオブジェクト宣言を使用します。各オブジェクト宣言は、入れ子構造として子オブジェクト宣言を含むこともできます。

オブジェクト宣言は、オブジェクトのタイプ名で始まり、中かっこで囲まれます。この中括弧の中で、すべてのプロパティと子オブジェクトを宣言します。

以下に簡単なオブジェクト宣言を示します：

Rectangle {
    width: 100
    height: 100
    color: "red"
}

これは、Rectangle 型のオブジェクトとそのプロパティを宣言しています。Rectangle 型はQtQuick QML モジュールが提供するもので、ここで定義されているプロパティは長方形のwidth 、height 、color の値です。他のプロパティを含めることもできます。詳しくはRectangle QML 型のドキュメントを参照してください。

Rectangle 型のオブジェクトは、QtQuick QML モジュールをインポートしているQML 文書の一部であればインスタンス化されます (Rectangle 型を利用できるようにするため)。つまり、先のソースコードに次の例のようなimport文を追加してください：

import QtQuick

Rectangle {
    width: 100
    height: 100
    color: "red"
}

Qt for MCUs アプリケーションが.qml ドキュメントをロードすると、指定されたプロパティを持つRectangle オブジェクトが生成されます：

あ る いは、 以下の例の よ う に、 少数のオブジ ェ ク ト プ ロ パテ ィ を 1 行で定義す る こ と も で き ます：

Rectangle { width: 100; height: 100; color: "red" }

先に定義したRectangle オブジェクトは、いくつかのプロパティを定義しているだけなので、非常に単純であることは明らかです。より有用なオブジェクトを作成するためには、QML オブジェクトの属性 で説明されているように、他の多くのプロパティを持つオブジェクトを定義することを検討してください。さらに、次のセクションで示すように、子オブジェクトを定義することもできます。

子オブジェクト

どのようなオブジェクト宣言でも、その子オブジェクトを定義するオブジェクト宣言を入れ子にすることができます。つまり、オブジェクト宣言は、任意の数の子オブジェクトを含むオブジェクトツリーを暗黙のうちに定義することになります。

例えば、次のRectangle オブジェクト宣言は、Gradient オブジェクト宣言を含み、その中に2つのGradientStop 宣言を含んでいます：

import QtQuick

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

この先のコードでは、Rectangle オブジェクトをルートに持ち、Gradient 子オブジェクトを持つオブジェクト・ツリーを定義しています。このオブジェクト・ツリーは、GradientStop 子オブジェクトを2つ持ちます。

先ほどの例で見た親子関係は、QMLのオブジェクトツリーの文脈では重要な概念です。同じような概念はビジュアルシーンにもあり、Item QMLタイプで表現されます。ほとんどのQMLオブジェクトは視覚的に描画されることを意図しているため、Item 型はほとんどのQML型の基本型となっています。例えば、Rectangle とText はどちらもItem をベースとした型です。つまり、Text オブジェクトをRectangle オブジェクトの視覚的な子として宣言することができます：

import QtQuick

Rectangle {
    width: 200
    height: 200
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

この先ほどの例では、Text オブジェクトが、オブジェクトツリー内の親ではなく、parent 値を使用して視覚的な親を参照していることがわかります。この例では、Rectangle オブジェクトが、Text オブジェクトの親になっていますが、これは、QML のオブジェクトツリー上でも、ビジュアルシーン上でも同じです。

しかし、オブジェクトの視覚的な親を変更することはできますが、オブジェクトツリーのコンテキストでオブジェクトの親を変更することはできません。

Item タイプのビジュアルペアレントの概念については、ビジュアルペアレントを参照してください。

コメント

QMLにおけるコメントの文法はJavaScriptと似ています。以下の例では、QMLで利用可能な1行コメントと複数行コメントの両方を示しています：

Text {
text: "Hello world!"    //a basic greeting
/*
    We want this text to stand out from the rest so
    we give it a large size and different font.
*/
font.family: "Helvetica"
font.pointSize: 24
}

QMLエンジンはQMLコードを処理する際、コメントを無視します。QMLエンジンはQMLコードを処理する際、コメントを無視します。コメントは、コードの一部が何をしているのかを説明するのに便利です。

また、コメントを使ってコードを実行させないようにすることもできます。

Text {
    text: "Hello world!"
    //opacity: 0.5
}

先ほどの例では、opacity: 0.5 という行が1行のコメントなので、Text オブジェクトの不透明度は変化しません。