QML 教程 1 - 值类型¶

第一个程序是一个非常简单的“Hello world”示例，介绍了一些基本的QML概念。下图是这个程序的截图。

以下是应用程序的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中创建应用程序时可以使用的基本构建块之一。我们给它一个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
}

我们添加了一个Text类型作为根Rectangle类型的子类型，用于显示文本‘Hello world!’。

y 属性用于将文本垂直定位在距离其父元素顶部30像素的位置。

anchors.horizontalCenter 属性指的是类型的水平中心。在这种情况下，我们指定我们的文本类型应该在页面元素中水平居中（参见基于锚点的布局）。

font.pointSize 和 font.bold 属性与字体相关，并使用点符号。

查看示例¶

要查看您创建的内容，请使用您的文件名作为第一个参数运行qml工具（位于bin目录中）。例如，要从安装位置运行提供的已完成教程1示例，您需要输入：

qml tutorials/helloworld/tutorial1.qml