QML構文の基本

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

QMLのソースコードは、一般的にQMLドキュメント（QMLコードのスタンドアロン ドキュメント）を通してエンジンに読み込まれます。QMLドキュメントではQMLオブジェクトの型を定義し、アプリケーション全体で再利用することができます。QMLファイルの中でQMLオブジェクトの型として宣言するためには、型名は大文字で始まらなければならないことに注意してください。

インポート文

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

• QMLモジュール
• QML文書としての型定義を含む相対ディレクトリ
• JavaScriptファイル

JavaScriptファイルをインポートする際には、そのファイルのプロパティやメソッドにアクセスできるように修飾する必要があります。

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

• import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]
• import "<Directory>"
• import "<JavaScriptFile>" [as <ScriptIdentifier>]

例

• import QtQuick 2.0
• import QtQuick.LocalStorage 2.0 as Database
• import "../privateComponents"
• import "somefile.js" as Script

例: QMLのインポートに関する詳しい情報は、QML Syntax - Import Statementsのドキュメントを参照してください。

オブジェクト宣言

構文的には、QMLコードのブロックは、作成されるQMLオブジェクトのツリーを 定義します。オブジェクトはオブジェクト宣言を用いて定義されます。オブジェクト宣言には、 作成されるオブジェクトの種類や、オブジェクトに付与される属性が記述されます。各オブジェクトは、入れ子になったオブジェクト宣言を使って子オブジェクトを宣言することもできます。

オブジェクト宣言は、オブジェクト・タイプの名前と、それに続く中括弧で構成されます。すべての属性と子オブジェクトは、この中括弧の中で宣言されます。

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

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

これは、Rectangle 型のオブジェクトを宣言し、そのオブジェクトに定義された属性を中括弧で囲んでいます。Rectangle 型はQtQuick モジュールによって利用可能になった型であり、このケースで定義されている属性は、長方形のwidth 、height 、color プロパティの値です。(これらは、Rectangle ドキュメントで説明されているように、Rectangle タイプによって利用可能になったプロパティです)。

上記のオブジェクトは、QML文書の一部であればエンジンに読み込ませることができます。つまり、QtQuick モジュールをインポートする（Rectangle タイプを利用できるようにする）importステートメントでソースコードが補完されている場合です：

import QtQuick 2.0

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

.qml 、QMLエンジンに読み込まれると、上記のコードはQtQuick モジュールから提供されたRectangle 型を用いてRectangle オブジェクトを生成します：

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

明らかに、この例で宣言されたRectangle オブジェクトは、いくつかのプロパティ値しか定義していないので、実にシンプルです。より有用なオブジェクトを作成するために、オブジェクト宣言では他の多くの種類の属性を定義することができます。さらに、オブジェクト宣言では、子オブジェクトを定義することができます。

子オブジェクト

どのようなオブジェクト宣言でも、ネストされたオブジェクト宣言によって子オブジェクトを定義することができます。このように、オブジェクト宣言は、任意の数の子オブジェクトを含むオブジェクト・ツリーを暗黙のうちに宣言します。

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

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

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

このコードがエンジンに読み込まれると、Rectangle オブジェクトをルートに持つオブジェクト・ツリーが作成されます。このオブジェクトはGradient 子オブジェクトを持ち、その子オブジェクトはGradientStop 子オブジェクトを2つ持ちます。

ただし、これはQMLのオブジェクトツリーにおける親子関係であって、ビジュアルシーンにおける親子関係ではないことに注意してください。ビジュアルシーンにおける親子関係の概念は、QtQuick モジュールのItem 型によって提供されています。この型はほとんどの QML 型の基本型となっており、ほとんどの QML オブジェクトは視覚的に描画されることを意図しているからです。例えば、Rectangle とText はどちらもItem をベースとした型であり、以下ではText オブジェクトがRectangle オブジェクトの視覚的な子として宣言されています：

import QtQuick 2.0

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

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

上記のコードでText オブジェクトがparent の値を参照するとき、それはオブジェクトツリーの親ではなく、視覚的な親を参照しています。つまり、Rectangle オブジェクトは、QML オブジェクトツリーのコンテキストにおいても、ビジュアルシーンのコンテキストにおいても、Text オブジェクトの親なのです。しかし、parent プロパティを変更することで、視覚的な親を変更することができますが、オブジェクトツリーのコンテキストにおけるオブジェクトの親を QML から変更することはできません。

(さらに、Text オブジェクトが、Rectangle のプロパティに代入されずに宣言されていることに注目してください。先ほどの例では、Gradient オブジェクトが矩形のgradient プロパティに代入されていました。これは、Item のchildren プロパティが型のデフォルト・プロパティとして設定され、より便利な構文が使えるようになっているためです)。

Item 型を使ったビジュアル・ペアレントの概念については、ビジュアル・ペアレントのドキュメントを参照してください。

コメント

QMLにおけるコメントの構文はJavaScriptと似ています：

• 一行コメントは // で始まり、行末で終わります。
• 複数行のコメントは/*で始まり、*/で終わります。

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のコードを処理する際、エンジンはコメントを無視します。後日参照するときや、他の人に実装を説明するときなど、コードの一部を説明するのに便利です。

また、コメントを使ってコードの実行を禁止することもできます。

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

上の例では、Text オブジェクトは通常の不透明度を持ちますが、これは行の不透明度：0.5 がコメントになっているからです。