Qt Quick中文手册.docx

Qt Quick中文手册.docx

《Qt Quick中文手册.docx》由会员分享，可在线阅读，更多相关《Qt Quick中文手册.docx（94页珍藏版）》请在冰豆网上搜索。

QtQuick中文手册

QML杂记Tonkv翻译

QtQuick

简介

QtQuick提供了一套高动态，丰富的QML元素来定制用户界面的说明性框架。

QtQuick有助于

程序开发员与界面设计员的合作为便携式设备建立流畅的用户界面，例如：

移动电话、媒体播放器，机

顶盒以及上网本等。

QtQuick包含了QtDeclarativeC++模块，QML并且它们全被整合到Qt

CreateIDE中。

使用QtDeclarativeC++模块可以从你的QT应用程序中载入QML文件并与之互动。

QML是对JavaScript一种扩展，它提供一种机制使用QML元素来说明构建一个对象树。

QML对

JavaScript与Qt现有的QObjec-tbase类型系统进行整合改善；增加了自动属性绑定的支持并提供在

语言级别的网络透明度。

QML元素是一套先进的图形，就像搭积木方式那样构建界面。

这些不同的元素是通过QML文档来

绑在一起的，从简单的按钮与滑块到复杂完整的应用程序，例如一个受欢迎的Flickr照片共享网站上的

照片浏览器。

QtQuick是建立在Qt固有优势的基础上。

QML可被用于逐步扩展现有的程序或创建全新的应用

程序。

QML通过QtDeclarative模块来完全扩展C++功能。

入门

QML语言入门

QML是一个说明性语言，用来描述程序的用户界面：

它的外观以及它的行为。

在QML中，一个用

户界面作为一个带有属性的对象树。

本篇是为有很少或没有编程经验的人准备的。

JavaScript是用来作为QML的脚本语言，所以你可

能想对它了解多一点（JavaScript：

TheDefinitiveGuide），然后再深入QML。

另外如HTML与

CSS等Web技术的基础原理也是有帮助的；但它不是必需的。

QML语言基础

QML类似这样：

importQt4.7

Rectangle{

语言岛网站1

QML杂记Tonkv翻译

width:

200

height:

200

color:

"blue"

Image{

source:

"pics/logo.png"

anchors.centerIn:

parent

}

}

对象是指定的类型，紧随其后是一对大括号，对象类型总是首字母为大写。

在上面的示例中，有两个

对象，一个Rectangle［矩形］与一个Image［图像］。

在大括号之间是关于该对象特定的信息，例如

它们的属性。

属性是以property［属性］:

value［值］形式指定的。

在上面的示例中，我们可以看到图像有个名为

source［来源］的属性，它的值被指定为”pics/logo.png”。

该属性与它的值是由冒号来分隔。

属性是由单行来输写：

Rectangle{

width:

100

height:

100

}

或单行输写多个属性：

Rectangle{width:

100;height:

100}

当单行输写多属性/值时，必须由分号来分隔开来。

Import语句导入Qt模块，它包含所有标准的QML元素。

如果没有Import语句；那么Rectangle与

Image元素将无效。

表达式

除了赋值属性外；你也可以用JavaScript编写的表达式来指定。

Rotation{

angle:

360*3

}

这些表达式可以包含其它的对象与属性的引用，在这种情况下就会建立约束关联：

当该表达式改变值

语言岛网站2

QML杂记Tonkv翻译

时；该属性值将自动更新。

Item{

Text{

id:

text1

text:

"HelloWorld"

}

Text{

id:

text2

text:

text1.text

}

}

在上面的示例中，text2对象将显示与text1相同的文本。

如果text1改变值；那么text2也将自

动更新为相同的值。

注意这里我们通过使用id值引用其它的对象。

（详情请参见id属性信息）

QML注释

在QML中的注释类似于JavaScript。

单选注释以//开始。

多行注释以/*开始，以*/结束。

importQt4.7

注释是不被执行的，添加注释可对代码进行解释或者提高其可读性。

注释同样还可用于防止代码执行，这对跟踪问题是非常有用的。

Text{

text:

"Helloworld!

"

//opacity:

0.5

}

在上面的示例中，这个Text对象将正常显示，一旦opacity:

0.5这行关掉注释，这是以半透明方式

显示文本。

属性

属性命名

属性命名以首字母为小字（附加属性除外）。

语言岛网站3

QML杂记Tonkv翻译

属性类型

QML支持许多类型的属性（参阅QML基本类型）。

基本类型包括整型、实数型、布尔、字符串、颜

色以及列表。

Item{

x:

10.5//a'real'property

...

state:

"details"//a'string'property

focus:

true//a'bool'property

}

QML属性是有类型安全检测的。

也就是说，它们只允许你指定一个与属性类型相匹配的值。

例如，

项目x属性类型是实数，如果你赋值一个字符串；那么将会得到错误的信息。

Item{

x:

"hello"//illegal!

}

id属性

每个对象可给予一个特定唯一的属性称之为id。

在同一个QML文件中不可能拥有与其它对象同名的id

值。

指定一个id可以允许该对象可以被其它的对象与脚本引用。

下面的示例中，第一个矩形元素的id名为”myRect”。

第二个矩形元素的宽度是引用的

myRect.widtch，这意味着它将与第一矩形具有相同的width值。

Item{

Rectangle{

id:

myRect

width:

100

height:

100

}

Rectangle{

width:

myRect.width

height:

200

}

}

请注意，一个id首字符必须是小写字母或下划线并且不能包含字母，数字和下划线以外的字符。

语言岛网站4

QML杂记Tonkv翻译

列表属性

列表属性类似于下面这样：

Item{

children:

[

Image{},

Text{}

]

}

列表是包含在方括号内，以逗号分隔的列表元素。

在你只分配单一项目列表的情况下，是可以省略方

括号：

Image{

children:

Rectangle{}

}

默认属性

每个对象类型可以指定列表或对象属性之一作为其默认属性。

如果一属性已被声明为默认属性，该属

性标记可以被省略。

例如该代码：

State{

changes:

[

PropertyChanges{},

PropertyChanges{}

]

}

可以简化成这样：

State{

PropertyChanges{},

PropertyChanges{}

}

因为changes是State类型的默认属性。

分组属性

在某些情况下使用一个'.'符号或分组符号形成一个逻辑组。

分组属性可写以下这样：

语言岛网站5

QML杂记Tonkv翻译

Text{

font.pixelSize:

12

font.bold:

true

}

或者这样：

Text{

font{pixelSize:

12;bold:

true}

}

在元素文件分组属性使用'.'符号显示。

附加属性

有些对象的属性附加到另一个对象。

附加属性的形式为Type.property其中Type是附加property

元素的类型。

例如：

Component{

id:

myDelegate

Text{

text:

"Hello"

color:

ListView.isCurrentItem?

"red":

"blue"

}

}

ListView{

delegate:

myDelegate

}

ListView元素附加ListView.isCurrentItem属性到每个它创建的代理上。

另一个附加属性的例子就是Keys元素，它用于处理任意可视项目上的按键，例如：

Item{

focus:

true

Keys.onSelectPressed:

console.log（"Selected"）

}

信号处理器

信号处理器允许响应事件时处理动作。

例如，MouseArea元素有信号处理器来处理鼠标按下，释放

语言岛网站6

QML杂记Tonkv翻译

以及单击：

MouseArea{

onPressed:

console.log（"mousebuttonpressed"）

}

所有信号处理器开始都是启用的。

有一些信号处理器包含一个可选的参数，例如MouseAreaonPressed信号处理程序有鼠标参数：

MouseArea{

acceptedButtons:

Qt.LeftButton|Qt.RightButton

onPressed:

if（mouse.button==Qt.RightButton）console.log（"Rightmousebuttonpressed"）

}

QML教程

这节内容是通过QML入门教程来熟悉QtQuick语言。

当然它不会面面俱到；只是重点让大家熟悉主

要语法与特性。

通过这节几个不同的步骤我们学习QML基本类型，使用属性与信号来建立我们自己的QML组件；而

且还要使用状态与变换的帮助来建立一个简单的动画。

这节从迷你的“HelloWorld”程序出发，在随后的章节中将引入新的概念。

这个教程的源代码位于$QTDIR/examples/declarative/tutorials/helloworld文件夹下。

教程1——基本类型

这是一个非常简单的”HelloWorld”程序，它将介绍一些基本的QML概念。

下图是该程序运行的结

果。

语言岛网站7

QML杂记Tonkv翻译

这是该程序的源代码：

importQt4.7

Rectangle{

id:

page

width:

500;height:

200

color:

"lightgray"

Text{

id:

helloText

text:

"Helloworld!

"

y:

30

anchors.horizontalCenter:

page.horizontalCenter

font.pointSize:

24;font.bold:

true

}

}

逐步讲解

导入

首先，我们必须导入我们这个范例需要的类型。

大多数QML文件都将导入内置的QML类型（类似于

Rectangle,Image……）这都包含在Qt内，使用：

importQt4.7

Rectangle元素

Rectangle{

id:

page

width:

500;height:

200

color:

"lightgray"

我们声明类型Rectangle为根元素。

你可以使用它在应用程序中创建一个基本块。

我们这里给予它

一个id作为标签以便稍后引用。

在这种情况里，我们命名它为“page”。

同样也设置width,height与

color属性。

Rectangle元素还包含许多其它的属性（例如x与y）；但这些我们保留它们默认的值。

Text元素

Text{

id:

helloText

语言岛网站8

QML杂记Tonkv翻译

text:

"Helloworld!

"

y:

30

anchors.horizontalCenter:

page.horizontalCenter

font.pointSize:

24;font.bold:

true

}

这里添加一个Text元素作为根元素Rectangle的子级来显示文本“HelloWorld!

”。

这里的y属性是用于定位文本从它父级顶部垂直距离30像素的位置。

anchors.horizontalCenter属性将参考一个元素的水平中心位置。

在这里我们指定文本元素位于

page元素的水平中心位置。

font.poingSize与font.bold属性是与字体设置相关。

查看该范例

为了查看你编写好的程序，请运行QMLViewr工具（位于bin文件夹下），用你程序文件名作为第

一个参数。

例如运行这里提供的教程1范例，你需要这样输入命令行：

bin/qmlviewer$QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml

教程2——QML组件

这节增加了一个颜色拾取器用于颜色该文本。

我们的颜色拾取器是六格不同颜色的单元格。

为了避免每个单元格重复多次相同的代码，我们将创建

一个新的cell组件。

组件是定义一个新类型的方法，可以在其它的QML文件重复使用。

QML组件类似于

黑匣子通过属性、信号以及函数与外部世界相互影响，通常是在自己的QML文件中定义的。

（详情请参

见定义新组件）。

该组件的文件名必须以一个大写字母开头。

Cell.qml的QML代码

语言岛网站9

QML杂记Tonkv翻译

importQt4.7

Item{

id:

container

propertyaliascellColor:

rectangle.color

signalclicked（colorcellColor）

width:

40;height:

25

Rectangle{

id:

rectangle

border.color:

"white"

anchors.fill:

parent

}

MouseArea{

anchors.fill:

parent

onClicked:

container.clicked（container.cellColor）

}

}

逐步讲解

Cell组件

Item{

id:

container

propertyaliascellColor:

rectangle.color

signalclicked（colorcellColor）

width:

40;height:

25

我们组件的根元素是一个id名为container的Item。

Item是一个最基本的可视元素并经常用作其

它元素的容器。

propertyaliascellColor:

rectangle.color

声明一个cellColor属性。

这个属性是从我们组件外访问的，允许我们使用不同的颜色来实例化单

元格。

该属性只是对现存的属性使用了一个别名。

signalclicked（colorcellColor）

语言岛网站10

QML杂记Tonkv翻译

我们需要这个组件cellColor属性带有color类型的单击信号，这将在稍后的主QML文件中使用到

这个信号来改变文本的颜色。

Rectangle{

id:

rectangle

border.color:

"white"

anchors.fill:

parent

}

我们单元格组件是id名为rectangle的颜色化矩形。

anchors.fill属性是设置元素尺寸的简便办法。

在这种情况下矩形将拥有父级同样尺寸的大小。

MouseArea{

anchors.fill:

parent

onClicked:

container.clicked（container.cellColor）

}

为了单击一个单元格来改变文本的颜色，我们创建一个MouseArea元素，它是与父级有同样尺寸的。

MouseArea定义了一个Clicked信号。

当这个信号被触发时；我们发射使用颜色作为参数的单击信

号。

主QML文件

在我们的主QML文件中，我们使用Cell组件来创建颜色拾取器：

importQt4.7

Rectangle{

id:

page

width:

500;height:

200

color:

"lightgray"

Text{

id:

helloText

text:

"Helloworld!

"

y:

30

anchors.horizontalCenter:

page.horizontalCenter

font.pointSize:

24;font.bold:

true

}

Grid{

id:

colorPicker

x:

4;anchors.bottom:

page.bottom;anchors.bottomMargin:

4

rows:

2;columns:

3;spacing:

3

Cell{cellColor:

"red";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"green";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"blue";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"yellow";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"steelblue";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"black";onClicked:

helloText.color=cellColor}

}

}

语言岛网站11

QML杂记Tonkv翻译

我们在网格中放置六个单元格，使用不同的颜色来创建一个颜色拾取器。

Cell{cellColor:

"red";onClicked:

helloText.color=cellColor}

当我们单元格的clicked信号触发时，需要传递cellColor参数来设置文本的颜色。

通过一个属性

的‘onSignalName’的命名方式来应付组件的任何信号。

教程3——状态与变换

在这一节中，我们使用这个例子有更多的动态，这里介绍状态与变换。

我们可以使用文本移动到屏幕的底部，当单击时旋转并变成红色。

QML代码：

importQt4.7

Rectangle{

id:

page

width:

500;height:

200

color:

"lightgray"

Text{

id:

helloText

text:

"Helloworld!

"

y:

30

anchors.horizontalCenter:

page.horizontalCenter

font.pointSize:

24;font.bold:

true

MouseArea{id:

mouseArea;anchors.fill:

parent}

states:

State{

name:

"down";when:

mouseArea.pressed==true

PropertyChanges{target:

helloText;y:

160;rotation:

180;color:

"red"}

}

transitions:

Transition{

from:

"";to:

"down";reversible:

true

ParallelAnimation{

NumberAnimation{properties:

"y,rotation";duration:

500;easing.type:

Easing.InOutQuad}

ColorAnimation{duration:

500}

}

}

}

Grid{

语言岛网站12

QML杂记Tonkv翻译

id:

colorPicker

x:

4;anchors.bottom:

page.bottom;anchors.bottomMargin:

4

rows:

2;columns:

3;spacing:

3

Cell{cellColor:

"red";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"green";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"blue";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"yellow";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"steelblue";onClicked:

helloText.color=cellColor}

Cell{cellColor:

"black";onClicked:

helloText.color=cellColor}

}

}

逐步讲解

states:

State{

name:

"down";when:

mouseArea.pressed==true

PropertyChanges{target:

helloText;y:

160;rotation:

180;color:

"red"}

}

首先我们对文本元素创建名为down的状态。

当MouseArea被按下时，这个状态将被激活；当鼠标

键释放时，将处于非激活状态。

down状态包含一套从默认状态中的属性改变（这在QML中已经初始化定义过）。

这里是设置文本

的y属性为160,旋转180度并且设置为color为红色。

transitions:

Transition{

from:

"";to:

"down";reversible:

true

ParallelAnimation{

NumberAnimation{properties:

"y,rotation";duration:

500;easing.type:

Easing.InOutQuad}

ColorAnimation{duration:

500}

}

}

因为我们不希望文本运动时出现不平滑的现象，这里在两个状态之间添加一个过渡。

from与to定义两状态间的变换。

在这里是从默