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

>

创建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操作使其运动看起来更加平滑。

1 2 3 4 5 6 7 8 9 10 11 12

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

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