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

<Qt Enterprise最新版下载>

添加应用程序逻辑

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

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

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

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

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

MainForm {
anchors.fill: parent
id: page

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

mouseArea1 {
onClicked: stateGroup.state = ' '
}

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

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

mouseArea2 {
onClicked: stateGroup.state = 'State1'
}

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

mouseArea3 {
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运行该应用程序。

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

购买Qt Enterprise最新正版授权！详情请""

新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>