Qt使用教程之建立Qt Quick应用程序（三）

<Qt Enterprise最新版下载>

添加应用程序逻辑

新的项目向导将样本代码添加到main.qml文件中，用来建立菜单项和按钮。经过删除旧的代码和添加新的代码来修改样本代码。您能够从UI表单中删除按钮，同时还须要从main.qml中删除相应的代码（或应用程序不能被建立）。

编辑main.qml文件添加指针到两个附加状态中：State1和State2。您不能使用Qt Quick Designer为一个Window QML类型添加状态。使用代码编辑器添加状态到StateGroup QML类型中，经过状态组的ID来引用它们。

1. 置顶窗口的大小和背景颜色做为ApplicationWindow类型的属性：

ApplicationWindow {

visible: true

title: qsTr( "Transitions" )

width :  330

height :  330

2. 为MainForm类型指定一个ID，以便您能使用在MainForm.ui.qml中导出的属性：

MainForm {

anchors.fill: parent

id: page

3. 在mouseArea1中添加一个指针到所点击的表达式中：

mouseArea 1 {

onClicked: stateGroup.state =  ' '

}

表达式设置状态为基本状态，而且将图像返回到起初始位置。

4. 添加指针到mouseArea2所点击的表达式中，并将状态设置为State1：

mouseArea 2 {

onClicked: stateGroup.state =  'State1'

}

5. 添加指针到mouseArea3所点击的表达式中，并将状态设置为State2：

mouseArea 3 {

onClicked: stateGroup.state =  'State2'

}

}

Qt logo的位置绑定到矩形，以确保当视图在不一样尺寸的屏幕上缩放时该logo显示在矩形内。设置表达式的x和y属性，代码以下：

StateGroup {

id: stateGroup

states: [

State {

name:  "State1"

 

PropertyChanges {

target: page. icon

x: page.middleRightRect.x

y: page.middleRightRect.y

}

},

State {

name:  "State2"

 

PropertyChanges {

target: page. icon

x: page.bottomLeftRect.x

y: page.bottomLeftRect.y

}

}

]

7. Ctrl+R运行该应用程序。

单击矩形将Qt logo从一个矩形移动到另外一个矩形中。

添加动画到视图中

添加转换到状态组中，用于定义当Qt logo在不一样状态间移动时属性应该如何改变。该转换适用于应用动画到Qt logo中。例如当Qt logo移动到middleRightRect并简化成bottomLeftRect时，它会反弹回来。在代码编辑器中添加转换。

1. 在代码编辑器中，添加如下的代码来指定当移动到State1时，Qt logo的x和y坐标超过1秒的线性更改：

transitions: [

Transition {

from:  "*" ; to:  "State1"

NumberAnimation {

easing.type: Easing.OutBounce

properties:  "x,y" ;

duration:  1000

}

},

2. 您能够使用Qt Quick工具栏从线性OutBounce中为动画更改缓动曲线类型：

• 在代码编辑器中点击NumberAnimation来显示相应图标，而后单击该图标打开工具栏。

• 在Easing字段中选择Bounce。

• 在Subtype字段中选择Out。

3. 添加如下的代码来指定当移动到State2时，Qt logo的x和y坐标超过2秒的线性更改，而且InOutQuad easing函数被调用：

Transition {

from:  "*" ; to:  "State2"

NumberAnimation {

properties:  "x,y" ;

easing.type: Easing.InOutQuad;

duration:  2000

}

},

4. 添加如下的代码来指定当移动到任意其余状态时，Qt logo的x和y坐标超过200毫秒的线性更改：

Transition {

NumberAnimation {

properties:  "x,y" ;

duration:  200

}

}

]

5. Ctrl+ R运行该应用程序。

点击矩形来查看动画切换。文件：

• transitions/MainForm.ui.qml

• transitions/main.qml

• transitions/qml.qrc

• transitions/transitions.pro

有兴趣的朋友能够点击查看更多有关Qt的文章！