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来添加属性，我们将使用该属性来定位图片：
|
1
2
3
4
5
6
7
|
Image {
source:
"Bluebubble.svg"
smooth:
true
property real centerX
property real centerY
property real bubbleCenter
}
|
在代码编辑器中，编辑main.qml指定应用程序标题，通过以下的代码片段说明：
|
1
2
3
4
5
6
|
ApplicationWindow {
id: mainWindow
visible:
true
width: 640
height: 480
title: qsTr(
"Accelerate Bubble"
)
|
使用bubble属性来定位图像：
|
1
2
3
4
5
6
7
|
MainForm {
anchors.fill: parent
bubble {
id: bubble
centerX: mainWindow.width / 2
centerY: mainWindow.height / 2
bubbleCenter: bubble.width / 2
|
然后基于新属性设置图像的X和Y位置：
|
1
2
3
4
|
x: bubble.centerX - bubble.bubbleCenter
y: bubble.centerY - bubble.bubbleCenter
}
|
然后基于加速度传感器值添加代码移动bubble：
1. 添加以下的import语句到main.qml中：
|
1
|
import QtSensors 5.5
|
2. 添加具有必要属性的Accelerometer类型：
|
1
2
3
4
5
6
|
Accelerometer {
id: accel
dataRate: 100
active:
true
}
|
3. 添加以下JavaScript函数来计算基于当前加速度值的bubble的x和y的位置：
|
1
2
3
4
5
6
|
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代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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
}
}
|