Qt使用教程:创建Qt Quick应用程序(三)

原创|使用教程|编辑:龚雪|2016-01-29 09:13:27.000|阅读 935 次

概述:本教程主要使用内置的QML类型并简单介绍Qt Quick的基本概念,同时还为大家介绍如何使用Qt Creator实现Qt Quick的状态和转换。

相关链接:

<Qt Enterprise最新版下载>

添加应用程序逻辑

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

编辑main.qml文件添加指针到两个附加状态中:State1State2。您不能使用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中添加一个指针到所点击的表达式中:

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中为动画更改缓动曲线类型:

创建Qt Quick应用程序(三)
  • 在代码编辑器中点击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最新正版授权!详情请"咨询在线客服"

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



标签:跨平台UI界面C/C++

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-01-29 09:47:29.000
0

不错的教程,一步一步的非常详细,还有代码提示,不错!


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Qt Enterprise

Qt是一个跨平台的C++图形用户界面应用程序开发框架。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat