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

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

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

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

font.pointSize とfont.bold プロパティはフォントに関するもので、ドット記法を用います。

例を見る

作成したものを見るには、qmlツール（bin ディレクトリにあります）をファイル名を第一引数として実行します。例えば、チュートリアル1の完成例をインストールした場所から実行するには、次のように入力します：

qml tutorials/helloworld/tutorial1.qml