剖析Qt Quick之QML程序

移动开发
本文讲述的是第一个Qt Quick中的QML程序,Qt Quick是Qt 4.7 中推出的一项新技术,它是一种高级用户界面技术,使用它可轻松地创建供移动和嵌入式设备使用的动态触摸式界面和轻量级应用程序。

Qt Quick是Qt 4.7主推的技术,下面是Qt官网对其进行的介绍:

Qt Quick 是一种高级用户界面技术,使用它可轻松地创建供移动和嵌入式设备使用的动态触摸式界面和轻量级应用程序。三种全新的技术共同构成了 Qt Quick 用户界面创建工具包:一个改进的Qt Creator IDE、一种新增的简便易学的语言 (QML) 和一个新加入 Qt 库中名为 QtDeclarative 的模块,这些使得 Qt 更加便于不熟悉 C++ 的开发人员和设计人员使用。

下面我们先到Qt Creator中查看相关帮助文件,让我们对它有个大体的了解。

我们查看Qt Creator中的帮助Help,首先进入我们眼帘的便是Qt Creator的介绍,在这里你可以查看Qt Creator的相关信息和使用方法。

剖析Qt Quick之QML程序

我们查看下面的目录,可以看到这里有简单的工程的建立教程。我们进入Creating an

Animated Application 的链接,这个便是一个最简单的QML工程的教程,你可以参考一下。

剖析Qt Quick之QML程序

下面我们建立自己的QML工程。

1.新建Qt QML Application ,工程名设置为helloWorld 。

剖析Qt Quick之QML程序

2.我们点击helloWorld.qmlproject文件。

在这里可以看到它就是包含了几个文件夹的路径信息,默认的都是本工程文件夹。

在最上面,有一句提示,Do you want to enable the experimental Qt Quick Designer? 你是否要启用实验中的Qt Quick Designer?当然,所以我们点击后面的按钮来启用Qt Quick Designer。

剖析Qt Quick之QML程序

3.这时弹出一个提示框。

它的大体内容是,如果启用Qt Quick Designer ,将影响Qt Creator的整体稳定性。还告诉了我们怎么停用Qt Quick Designer。我们选择“Enable Qt Quick Designer”。

剖析Qt Quick之QML程序 

#p#

4.我们关闭Qt Creator,然后重新打开它。我们再次打开刚才建立的工程。

双击helloWorld.qml文件,这时我们期盼已久的Qt Quick Designer界面终于出现了。对于这个界面,我们以后再详细讲解。

剖析Qt Quick之QML程序

5.我们再次回到Edit模式下,查看helloWorld.qml文件的内容。

  1. import Qt 4.6  
  2. Rectangle {  
  3.     width: 200  
  4.     height: 200  
  5.     Text {  
  6.         x: 66  
  7.         y: 93  
  8.         text: “Hello World”  
  9.     }  

这就是传说中的QML语言了,看上去有点像CSS,就像官网所说的,它是JavaScript的扩展。我们这里先不对这些代码做什么解释,到后面会专门来讲这个语言的。

6.我们这时运行程序,效果如下。

剖析Qt Quick之QML程序

7.我们更换一下程序的皮肤。

在skin菜单中选择一个皮肤。

剖析Qt Quick之QML程序 

运行效果如下:

剖析Qt Quick之QML程序

我们可以在其上右击鼠标,选择Quit菜单,退出程序。

8.关于停用Qt Quick

我们打开Help菜单,进入About Plugins子菜单。然后将Qt Quick项的对勾去掉即可。

剖析Qt Quick之QML程序

到这里,一个最简单的Qt Quick程序就完成了。我们可以看到,这是一个全新的体验,它与以前的Qt应用是完全不同的。

【编辑推荐】

Qt 平台中使GUI保持响应流畅

QML Image获取资源路径的细节

QML教程:Qt-Quick六大开源组件

QML教程:构建和安装QtComponents

QML教程:Review Native Quick Widgets

Chrome开始对Java和QuickTime的运行进行授权

责任编辑:zhaolei
相关推荐

2011-06-20 13:23:03

Qt Quick QML

2011-06-24 17:22:29

Qt Quick QML

2011-03-11 14:43:41

Qt-QuickQML

2011-06-20 13:05:53

Qt 4.7 Qt Quick

2011-05-16 14:12:30

QuickWidgetQML

2011-06-10 11:24:08

Qt Quick Designer

2011-06-27 15:08:18

QML 视图

2011-06-16 15:36:56

Qt Quick Symbian

2011-02-14 09:18:06

QT-Quick

2011-08-30 15:32:08

QtQuickQML

2011-07-01 14:39:08

Qt Quick

2011-08-30 16:08:24

Qt4.7Qt Quick

2011-08-30 15:49:03

QtQuick

2011-03-03 15:32:51

Qt-Quick

2011-07-08 16:46:21

QtQuick 1.0Symbian

2011-10-25 09:37:34

SymbianQt Quick诺基亚应用商店

2011-06-23 13:25:42

QT 源码 窗口

2018-01-19 10:37:00

2011-06-24 15:06:40

QT

2011-06-10 09:29:36

Qt Creator 布局管理器
点赞
收藏

51CTO技术栈公众号