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
    }

我们在根 Rectangle 类型中添加了一个 Text 类型，用于显示文本 'Hello world!'。

使用 y 属性将文本垂直放置在其父元素顶部30像素处。

anchors.horizontalCenter 属性指向一个类型的中点。在这种情况下，我们指定文本类型应横跨页面元素居中（请参阅锚点布局）。

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

查看示例

要查看您所创建的内容，请在 bin 目录中运行 qml工具并将文件名作为第一个参数。例如，要从安装位置运行提供的完成教程1示例，您将键入

qml tutorials/helloworld/tutorial1.qml

QML教程 QML教程2 - QML组件