QML HelloWord程序

這第一個程序是一個非常簡單的「Hello World」例子，介紹一些基本的QML概念。下面的圖片是這個程序的截圖。

這裏是QML代碼的應用程序：

import QtQuick 2.0

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

[Text](http://qt-project.org/doc/qt-5/qml-qtquick-text.htmll) {
    id: helloText
    text: "Hello world!"
    y: 30
    anchors.horizontalCenter: page.horizontalCenter
    font.pointSize: 24; font.bold: true
}

}

逐步解說

Import

首先，需要導入在這個例子中使用的類型。大多數QML文件將導入內置的QML類型（如矩形，圖像，...）來給Qt使用：

import QtQuick 2.0

Rectangle類型：

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

我們聲明類型矩形的根對象。這是基本的構建模塊之一，你可以用它來在QML創建一個應用程序。我們給它一個id爲以後能夠引用它。在這種情況下，我們把它稱爲「頁面」。還設置了寬度，高度和顏色屬性。矩形類型包含許多其他屬性（如x和y），但這些都是使用它們的默認值。

Text 類型：

[Text](http://qt-project.org/doc/qt-5/qml-qtquick-text.htmll) {
    id: helloText
    text: "Hello world!"
    y: 30
    anchors.horizontalCenter: page.horizontalCenter
    font.pointSize: 24; font.bold: true
}

我們添加了一個文本類型的顯示文本的根矩形子類型的 'Hello world!'.

y屬性用於在從其父的前垂直30個像素位置的文本。

anchors.horizontalCenter屬性是指一個類型的水平中心。在這種情況下，我們指定了文本類型應該水平居中的頁面元素

font.pointSize和font.bold性質與字體，並使用點符號。

查看示例

要查看所創建文件名作爲第一個參數運行qmlscene工具（位於bin目錄中）。例如，若要從安裝位置，請鍵入運行提供完成helloword例如：

qmlscene tutorials/helloworld/helloword.qml

程序進行結果：