QML チュートリアル 1 - 値型

この最初のプログラムは、QMLの基本的な概念を紹介する、非常にシンプルな「Hello world」の例です。下の図は、このプログラムのスクリーンショットです。

以下に、このアプリケーションのQMLコードを示します：

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }
}

手順解説

インポート

まず、この例で必要な型をインポートする必要があります。ほとんどの QML ファイルでは、Qt に付属する組み込みの QML 型（Rectangle 、Image など）を、次のようにしてインポートします：

import QtQuick

Rectangle 型

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

Rectangle 型のルートオブジェクトを宣言します。これは、QMLでアプリケーションを作成するために使用できる基本的な構成要素の1つです。後で参照できるように、id を割り当てます。この例では、「page」という名前を付けます。 また、width 、height 、color のプロパティも設定します。Rectangle 型には他にも多くのプロパティ（x やy など）がありますが、これらはデフォルト値のままにします。

テキスト型

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

ルート Rectangle タイプの子として、テキスト「Hello world!」を表示するText タイプを追加します。

y プロパティは、テキストを親要素の上端から 30 ピクセル下に垂直方向に配置するために使用されます。

anchors.horizontalCenter プロパティは、text タイプを水平方向に中央に配置します。この場合、text タイプがページ要素内で水平方向に中央に配置されるように指定します（「アンカーベースのレイアウト」を参照）。

font.pointSize プロパティとfont.bold プロパティはフォントに関連しており、ドット表記を使用します。

例の確認

作成した内容を確認するには、qml ツール（bin ディレクトリ内）を、ファイル名を最初の引数として指定して実行します。たとえば、インストール先から提供されている完成済みの「チュートリアル 1」の例を実行するには、次のように入力します。

qml tutorials/helloworld/tutorial1.qml