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 像素处。

锚点相关的属性，如锚点水平居中的属性，指的是类型的位置。在这种情况下，我们指定我们的文本类型应该在 page 元素中水平居中（见基于锚点的布局 ）。

有关字体的属性，如 font.pointSize 和 font.bold，使用点符号。

查看示例

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

qml tutorials/helloworld/tutorial1.qml