Qt使用教程:创建移动应用程序(二)

原创|使用教程|编辑:龚雪|2016-01-06 09:18:18.000|阅读 411 次

概述:本教程主要介绍了如何使用Qt Quick控件为Android和iOS设备开发Qt Quick应用程序。我们使用Qt Creator实现Qt Quick应用程序加速基于加速度值变化的SVG(可伸缩向量图形)图像。

相关链接:

<Qt Enterprise最新版下载>

创建Accelbubble主视图

当您倾斜设备时应用程序的主视图会显示一个SVG泡沫图像在屏幕上移动。为了在项目中使用Bluebubble.svg,您可以将其复制到项目目录中(QML文件相同的子目录中),该图像会出现在资源中。您也可以使用任何其他图像或QML类型来代替。

想要在Design模式下创建UI:

1. 在Projects视图中,双击MainForm.ui.qml文件来在Qt Quick Designer中打开它。

2. 在Navigator中选择RowLayout并点击Delete将其删除。

3. 在Library > QML Types中,选择Rectangle并将其拖动到导航器的Item中。

4. 在导航器中选择矩形框来编辑它们的属性:

  • 在ID字段中输入mainWindow,使其能够从其他地方引用矩形框。
  • 选择Layout标签,然后点击Fill to Parent按钮来锚定矩形框到项目中。

5. 在Library > Resources中,选择Bluebubble.svg并将其拖动到导航器的mainWindow中。

6. 在Properties面板的Id字段中输入bubble,使其能够从其他地方引用图片。

7. 在导航器中选择Export按钮来导出mainWindowbubble作为属性。

想要修改bubble的属性使其不支持Qt Quick Designer,因此,我们为它创建一个自定义的QML类型:

  • 选择Edit来在代码编辑器中打开MainForm.ui.qml。
  • 右键单击Image并选择Refactoring > Move Component into Separate File。
  • 在Component name字段中,输入Bubble并选择OK来创建Bubble.qml

在MainForm.ui.qml中Qt Creator创建一个引用到Bubble.qml。想要检查代码,您可以比较具有MainForm.ui.qml示例文件的MainForm.ui.qml和具有Bubble.qml示例文件的Bubble.qml。用户界面现在已经准备就绪,您可以切换到编辑模式编辑main.qml和Bubble.qml文件。

移动Bubble

新的项目向导添加样本代码到main.qml文件中来创建菜单项目和按钮。通过删除旧的代码并添加新的代码来修改样本代码。您已经从UI表单中删除了按钮,因此还需要从main.qml中删除相应的代码。

在代码编辑器中,编辑Bubble.qml来添加属性,我们将使用该属性来定位图片:

Image {
source: "Bluebubble.svg"
smooth: true
property real centerX
property real centerY
property real bubbleCenter
}

在代码编辑器中,编辑main.qml指定应用程序标题,通过以下的代码片段说明:

ApplicationWindow {
id: mainWindow
visible: true
width: 640
height: 480
title: qsTr("Accelerate Bubble")

使用bubble属性来定位图像:

MainForm {
anchors.fill: parent
bubble {
id: bubble
centerX: mainWindow.width / 2
centerY: mainWindow.height / 2
bubbleCenter: bubble.width / 2

然后基于新属性设置图像的X和Y位置:

x: bubble.centerX - bubble.bubbleCenter
y: bubble.centerY - bubble.bubbleCenter

}

然后基于加速度传感器值添加代码移动bubble:

1. 添加以下的import语句到main.qml中:

import QtSensors 5.5

2. 添加具有必要属性的Accelerometer类型:

Accelerometer {
id: accel
dataRate: 100
active: true

}

3. 添加以下JavaScript函数来计算基于当前加速度值的bubble的x和y的位置:

function calcPitch(x, y, z) {
return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
}
function calcRoll(x, y, z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
}

当加速度值变化时为Accelerometer类型的onReadingChanged信号添加以下的JavaScript代码:

onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)

if (isNaN(newX) || isNaN(newY))
return;

if (newX < 0)
newX = 0

if (newX > mainWindow.width - bubble.width)
newX = mainWindow.width - bubble.width

if (newY < 18)
newY = 18

if (newY > mainWindow.height - bubble.height)
newY = mainWindow.height - bubble.height

bubble.x = newX
bubble.y = newY
}

我们希望确保bubble的位置始终在屏幕的边界内。如果Accelerometer返回的不是数字(NaN),那么该值将会被忽略并且bubble位置不更新。

5. 在bubble的x和y属性中添加SmoothedAnimation操作使其运动看起来更加平滑。

Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}
Behavior on x {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}

购买Qt Enterprise最新正版授权!详情请"咨询在线客服"

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



标签:移动开发跨平台UI界面C/C++

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

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-01-06 10:32:33.000
0

步骤清楚详尽,还有代码,对于新手来说非常有帮助!赞一个!


为你推荐

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

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

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