文档章节

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

Miss_Hello_World
 Miss_Hello_World
发布于 2016/01/06 10:50
字数 972
阅读 22
收藏 2

<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的文章

© 著作权归作者所有

共有 人打赏支持
Miss_Hello_World
粉丝 18
博文 668
码字总数 404202
作品 0
九龙坡
【盘点】全面强大开发框架Qt资源汇总

Qt最早诞生于1991年,在全世界开发者中享有盛誉。Qt Enterprise v5.5是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中...

Miss_Hello_World
2016/02/25
87
0
一周盘点 | 跨平台移动Web开发框架DevExtreme在线演示等你来体验!

更多资源及工具也可以在【用户界面专题】找到,及时了解最新动态>> DevExpress (1)DevExpress Demo示例展示:支持响应式设计的DevExtreme Web UI开发框架 | 附在线演示 DevExtreme Web为触...

百mumu
2016/01/18
65
0
盘点2015年值得关注的8款跨平台开发工具(界面类)

1.Qt 下载地址 | 中文教程连载 Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用...

百mumu
2016/01/20
109
0
Qt使用教程之创建Qt Quick应用程序(一)

<Qt Enterprise最新版下载> 本教程主要使用内置的QML类型并简单介绍Qt Quick的基本概念。本文主要为大家介绍如何使用Qt Creator实现Qt Quick的状态和转换。我们创建一个应用程序,该应用程序...

Miss_Hello_World
2016/01/15
144
0
Qt使用教程之使用Qt Quick UI表单(二)

<Qt Enterprise最新版下载> 创建UI表单主视图 应用程序的主视图在一个表视图中显示一个客户列表,并在表视图中选中有关客户的详细信息。 创建主视图: 在Projects view (1)中,双击MainForm....

Miss_Hello_World
2016/02/17
106
0

没有更多内容

加载失败,请刷新页面

加载更多

【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
37分钟前
0
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
59分钟前
1
0
vm GC 日志 配置及查看

-XX:+PrintGCDetails 打印 gc 日志 -XX:+PrintTenuringDistribution 监控晋升分布 -XX:+PrintGCTimeStamps 包含时间戳 -XX:+printGCDateStamps 包含时间 -Xloggc:<filename> 可以将数据保存为......

Canaan_
昨天
0
0
学习设计模式——生成器模式

1. 认识生成器模式 1. 定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示 2. 组成: Builder:生成器接口,定义创建一个Product对象所需要的各个组件的操作,...

江左煤郎
昨天
1
0
C语言精要(第二章:基本数据类型)

2.1 C语言基本数据类型 在计算机术语中,把⼆进制数中的某⼀位数又称为⼀个⽐特(bit)。⽐特这个单位对于计算机⽽⾔,在度量上是最⼩的单位。除了⽐特之外,还有字节(byte)这个术语。⼀个...

ryanliue
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部