值得纪念的时刻 - Hello, QML!

简述

“Hello, World!”是面向世界的标志,所以,任何程序的起始点几乎都与之相关!

为了步入 QML 的世界,一起大声对天空说:“Hello, QML!”

| 版权声明:一去、二三里,未经博主允许不得转载。

第一个 QML 程序

值得纪念的时刻 - Hello, QML!

这是我们的第一个 QML 程序,非常简单,只介绍了一些基本的概念。

QML 代码:

import QtQuick 2.3

Rectangle {
    width: 300
    height: 300
    color: "lightgray"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

不经历这个伟大的时刻,不是伟大的 Qter。为了纪念这个伟大时刻,理解其精妙之所在,下面执行分解动作。

分解动作

Import

首先,导入 Qt Quick 模块,这使我们可以访问图形项,例如:Item、Rectangle、Text 等。

import QtQuick 2.3

Rectangle 类型

Rectangle {
    width: 300
    height: 300
    color: "lightgray"

声明一个类型为 Rectangle 的根对象,它是可以用来在 QML 中创建应用程序的基本构建单元之一。

一般情况下,属性 width、height 几乎总需要设置。一旦设置了这两个属性,就会有一个正确大小的空窗口准备填充内容。为了突出样式,我们还为其设置了背景色为浅灰色。

注意: Rectangle 类型还包含许多其他属性(例如:x 、y),但这些属性均保留默认值。

Text 类型

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

添加一个 Text 类型作为 Rectangle 类型的子项,用来显示文本“Hello, QML!”。

Anchors 用于指定 Item 相对其它 Item 的关系。这里,我们使用 anchors.centerIn 将 Text 元素固定到 Rectangle 的中心。

见证奇迹

要查看已创建的内容,请运行 qmlscene 工具(位于 bin 目录中)。高手向来比较喜欢命令行,打开 CMD,运行 qmlscene,以文件名 .qml 作为参数。

例如,键入:

qmlscene “Hello QML.qml”

当然,更简单的办法是找到 qmlscene 工具,然后双击打开,选择要运行的 QML 文件。

注意:以前的 Qt 版本中,提供了一个 qmlview 工具(qmlviewer.exe),也可用来运行单独的 QML/JavaScript 程序。

这里写图片描述

祝贺,伟大的 Qter!从这一刻开始,一个从来不懂 QML 的你,就跨入了 Qter 的行列,不管你的工作是不是使用 Qt,你都已经是 Qter 了。

展开阅读全文
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值