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

<Qt Enterprise最新版下载>

添加应用程序逻辑

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

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

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

1 2 3 4 5

ApplicationWindow { visible: true title: qsTr( "Transitions" ) width :  330 height :  330

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

1 2 3

MainForm { anchors.fill: parent id: page

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

1 2 3

mouseArea 1 { onClicked: stateGroup.state =  ' ' }

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

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

1 2 3

mouseArea 2 { onClicked: stateGroup.state =  'State1' }

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

1 2 3 4

mouseArea 3 { onClicked: stateGroup.state =  'State2' } }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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秒的线性更改：

1 2 3 4 5 6 7 8 9

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函数被调用：

1 2 3 4 5 6 7 8

Transition { from:  "*" ; to:  "State2" NumberAnimation { properties:  "x,y" ; easing.type: Easing.InOutQuad; duration:  2000 } },

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

1 2 3 4 5 6 7

Transition { NumberAnimation { properties:  "x,y" ; duration:  200 } } ]

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

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

• transitions/MainForm.ui.qml
• transitions/main.qml
• transitions/qml.qrc

• transitions/transitions.pro

有兴趣的朋友可以点击查看更多有关Qt的文章>>