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 mainWindow.width - bubble.width)
newX = mainWindow.width - bubble.width
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最新正版授权！详情请"咨询在线客服"
新年新禧新气象，送礼送福送优惠！
本站文章除注明转载外，均为本站原创或翻译
