Qt使用教程建立移动应用程序（二）

<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按钮来导出mainWindow和bubble做为属性。

想要修改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的文章！