Qt Quick简单学习教程

移动开发
Qt Quick 包含 QtDeclarative C++ 模块, QML(Qt Meta-Object Language),以及它们集成到Qt Creator IDE中的部分。

Qt Quick是本文要介绍的内容,主要是来了解Qt Quick的应用。Qt Quick (Qt User Interface Creation Kit)是一种高级用户界面技术,开发人员和设计人员可用它协同创建动画触摸式用户界面和应用程序。Qt Quick 包含 QtDeclarative C++ 模块, QML(Qt Meta-Object Language),以及它们集成到Qt Creator IDE中的部分。在Qt应用程序中通过使用QtDeclarativeC++模块,程序可以方便地和QML文件进行交互。

QML是一种描述性的脚本语言,文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子),但又支持javacript形式的编程控制。它结合了QtDesigner UI和QtScript的优点。QtDesigner可以设计出.ui界面文件,但是不支

持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互,但是有一个缺点,如果要在脚本中创建一个继承于QObject的图形对象非常不方便,只能在Qt代码中创建图形对象,然后从QtScript中进行访问。而QML可以在

脚本里创建图形对象,并且支持各种图形特效,以及状态机等,同时又能跟Qt写的C++代码进行方便的交互,使用起来非常方便。

在Qt C++文件中通过QDeclarativeView加载,就像使用UiLoader加载.ui文件一样。

使用 Qt 做过 UI 后一定对 QHBoxLayout, QVBoxLayout, 和 QGridLayout 这三个最重要也最常使用的 layout managers 非常熟悉。
在 QML 中使用下列三种布局管理器:Row,、Column、Grid,以及使用 Anchor 进行布局。

QML 中的 Row 元素会将其子控件都排列在同一行,相互不重叠。我们还可以使用它的 spacing 属性来定义子控件之间的距离。

QML 中的 Column 元素会将其子控件都排列在同一行,相互不重叠。我们可以使用它的 spacing 属性来定义子控件之间的距离。

QML 中的 Grid 元素会将其子控件都均匀地排列在一个网格内,相互不重叠,每一个子控件都被放置在一个网格单元的(0,0)位置,也就是左上角。Grid的 rows 和 columns 属性定义网格的行数和列数,列数默认是4。我们还可以使用 Grid 的spacing 属性来定义网格单元之间的距离,这里注意水平和垂直方向的 spacing 都是一样的。

Anchor

每一个 item 都可以被认为具有 7 条隐藏的“anchor lines":left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及 bottom

其中 baseline 是指的文本所在的线,如果 item 没有文字的话 baselinw 就和 top 的位置是相同的。除此之外,Anchor 系统还提供了margins 和 offsets。margins 是指一个 item 和外界之间所留有的空间,而 offsets 则可以通过使用 center anchor lines 来进行布局。

在Qt C++文件中通过QDeclarativeView加载,就像使用UiLoader加载.ui文件一样。

Item类是QML最基础的类

组件其实和其它编程语言中的宏,函数,类,结构体等功能差不多,就是代码复用。

组件由一个单独的QML文件名组成,文件名总是以大写字母开头,要使用该组件的时候直接使用该文件名就可以了。Item是最常使用的QML类型,一般用作其它类型的容器,可以理解成最顶级的父类,功能类似于QtGui中的QWidget。

MouseArea则为Item增加了一块鼠标响应区,在鼠标活动区,都能侦听到鼠标事件。

onClicked那一行则相当于为鼠标单击事件增加了一个处理行为

Component的语法规则,如果你在Cell.qml里定义的是clicked(),那么你在main.qml中引用的时候就该用onClicked()了。 然后由“when”指 定了什么时候触发这个状态PropertyChanges则指定了哪个元素的哪些属性会发生什么样的变化。

transitions 是用于增加动画效果的

“from”和”to”指明了当前的动画作用于哪两个状态变化之间。 “from”和”to”的参数名来自于State中的”name”属性。

ParalleAnimation则指定了有多个 有多个动画并行发生。NumberAnimation用于qreal类型的属性变化,ColorAnimation则用于颜色变化。

小结:Qt Quick简单学习教程的内容介绍完了,希望通过本文的学习能对你有所帮助!

责任编辑:zhaolei 来源: 互联网
相关推荐

2011-08-30 15:49:03

QtQuick

2011-06-10 11:24:08

Qt Quick Designer

2011-08-30 12:59:52

Qt数据库

2011-07-01 14:39:08

Qt Quick

2011-07-04 11:21:59

QT Designer

2011-03-11 14:43:41

Qt-QuickQML

2011-06-10 11:05:05

Qt Quick QML

2011-06-20 13:23:03

Qt Quick QML

2011-06-20 13:05:53

Qt 4.7 Qt Quick

2011-08-30 16:08:24

Qt4.7Qt Quick

2011-03-03 15:32:51

Qt-Quick

2011-09-07 16:28:46

QT WidgetQWidget

2011-06-24 17:22:29

Qt Quick QML

2011-05-16 14:12:30

QuickWidgetQML

2011-09-01 16:01:25

Qt插件

2011-02-14 09:18:06

QT-Quick

2011-06-16 15:36:56

Qt Quick Symbian

2011-10-25 09:37:34

SymbianQt Quick诺基亚应用商店

2011-07-08 16:46:21

QtQuick 1.0Symbian

2010-08-02 10:50:55

Flex3
点赞
收藏

51CTO技术栈公众号