QML入门教程之——QML入门简介(一)

本文是QML入门教程的第一部分,主要介绍了QML的基本概念和它的声明式脚本语言特性,便于快速构建用户界面。通过创建一个简单的"Hello World"程序,展示了如何在QML中定义对象树,并解释了QML文件的结构,包括import部分和Window元素。QML的实时编辑和运行特性使得界面开发更加高效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

一.QML简介

二.从"Hellow Word"浅谈我们第一个QML程序


一.QML简介

QML(Qt Meta Language 或者 Qt Modeling Language),从Qt4.7之后,Qt引入了一种声明式脚本语言,类似解释型语言,方便使用,不在是之前C++那样的编译型语言,极大的改变了传统的Qt 使用。将所有界面相关的都写入到一个qml文件中,QML 文件描述了一个对象树。其包含了构造块、图形元素(矩形、图片等)和行为(例如动画、切换等)。这些 QML 元素按照一定的嵌套关系构成复杂的组件,供用户交互,极大的方便了开发的过程,此语法同时具有简单易学的优点。

二.从"Hellow Word"浅谈我们第一个QML程序

我所使用的Qt版本为5.9.0,新建一个QML工程如下:

选择“Qt Quick Application”,其他选择默认就好,创建好之后我们会看到程序为我们生成了一个main.qml文件,其他主函数main.cpp也与C++混合编程有些小变化,如下所示:

主函数很简单,主要是通过定义一个“QQmlApplicationEngine”对象去加载我们的main.qml文件,我们更关注的是main.qml文件,如下:

如上述代码所示,直观感受就是此main.qml包括了两部分,一个import引入组件部分和一个Window 界面部分。前者用于引入文档中所需要的组件(有可能是类库,也可以是一个 JS文件或者另外的 QML 文件);后者用于声明本文档中的 QML 元素。
每一个 QML 文件有且只有一个Root根元素,类似于 XML 文档。这个根元素就是这个 QML 文档中定义的 QML 元素,在这个例子中就是一个 Window 对象。QML文件的语法极其简单,类似于 JSON文件 的定义,使用键值对的形式区分元素属性。所以我们能够很清楚看到,我们定义了一个窗口,可见性设置为真,宽度为 640 像素,高度为 480 像素,窗体的标题为“Hello Word”,除此之外,我们还嵌套了一个Text文本元素,文本的值为“Hello Word”。这个字符串是由 qsTr()函数返回的。qsTr()函数就是 QObject::tr()函数的 QML 版本,用于返回可翻译的字符串。Text 的位置是由锚点(anchor)定义。示例中的 Text 位置定义为 parent 中心,其中 parent 属性就是这个元素所在的外部的元素。anchors.centerIn: parent同理,我们可以看到MouseArea 是充满父元素的,我们运行后的界面显如下:

QML语法是一种解释型语言,我们可以实时修改qml文件,不用进行编译就可以直接运行,显示我们所需要的界面,比如我们将刚刚我们的文本字符串进行修改为“您好,中国!”,不进行编译,直接运行显示如下:

下一篇:QML入门教程之——QML模块基础语法(二)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尘海折柳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值