QML は、オブジェクトをその属性や、他のオブジェクトとの関係、および他のオブジェクトの変化に対する反応という観点から定義できる、マルチパラダイム言語です。 プロパティや動作の変化を、段階的に処理される一連の文を通じて表現する純粋な命令型コードとは対照的に、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モジュール（Rectangle 型を利用可能にするため）をインポートするQMLドキュメントの一部である場合にインスタンス化されます。つまり、次の例に示すように、前述のソースコードにインポート文を追加してください。

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 オブジェクトを持ち、さらにその オブジェクトが2つのGradientStop オブジェクトを子として持つオブジェクトツリーを定義しています。

前述の例に見られる親子関係は、QMLオブジェクトツリーの文脈において重要な概念です。同様の概念は、Item というQML型によって表されるビジュアルシーンの文脈でも利用可能です。Item 型は、ほとんどのQMLオブジェクトが視覚的にレンダリングされることを意図しているため、ほとんどのQML型の基底型となっています。 たとえば、Rectangle とText はどちらもItem を基底とする型であり、これにより、Text オブジェクトをRectangle オブジェクトの視覚的な子として宣言することができます。

import QtQuick

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

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

この前の例では、Text オブジェクトが、オブジェクトツリー上の親ではなく、parent の値を使用してその視覚的な親を参照していることがわかります。このケースでは、QMLオブジェクトツリーおよび視覚的なシーンの両方のコンテキストにおいて、Rectangle オブジェクトがText オブジェクトの親となっています。

ただし、オブジェクトの視覚的な親を変更することはできますが、オブジェクトツリーの文脈における親を変更することはできません。

Item 型における視覚的な親子関係の概念に関する詳細については、「視覚的な親」を参照してください。

コメント

QML でのコメントの構文は、JavaScript のものと似ています。次の例は、QML で使用可能な単一行コメントと複数行コメントの両方を示しています。

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 コードを処理する際、コメントを無視します。コメントは、参照用として、あるいは他者に実装内容を説明するために、コードの各セクションが何を行っているかを説明するのに役立ちます。

また、コメントを使用してコードの実行を阻止することもでき、これは問題の診断に役立つ場合があります。

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

前の例では、opacity: 0.5 という行が単一行コメントであるため、Text オブジェクトの不透明度は変化しません。