这个手册描述了使用qt quick面访的方式在android和ios设备上开发qtquick应用程序的方法。我们使用qt
creator实现一个qtquick应用程序，这个应用程序基于加速器的值来加速一个svg（可伸缩矢量图形）。
设置开发环境：
要想能够在移动设备上构建和运行一个应用程序，您必须为设备平台设置开发环境，配置qt creator和手机设备之间的连接。
要想部署到android设备，您必须下载和安装最新的android
ndk和sdk.更新sdk去获取为开发所需的api和工具。除此之外，您必须安装java的jdk和apache
ant.当您已经安装所有的这些工具以后，您必须在qt creator中指定它们的位置。如果想了解更多关于这方面的信息，请查看qt
for android(http://doc.qt.io/qt-5/android-support.html)和连接android设备(http://doc.qt.io/qtcreator/creator-developing-android.html).
在ios设备上开发，您必须安装xcode，使用它去配置一个设备。对于这个来说，您需要从苹果收到一个苹果开发者的账号和iso开发应用认证。如果想了解更多的详情信息，请查看连接ios设备(http://doc.qt.io/qtcreator/creator-developing-ios.html)
创建项目：
1
选择file(文件) >
新建文件或项目 >
应用程序 > qtquick application > choose.
3在创建路径中输入项目文件存储的路径，例如e:\examples
，接着点击下一步（或在osx平台上点击continue）.
4在qt quick component set下拉选中，选择qt quick controls
1.1.
5选择针对androidd和iphone os的构建套件，然后点击”下一步”.
注意：如果在”工具” > “选项”
> “构建和运行” > “构建套件”里指定了构建套件设置，那么构建套件将会被显示出来。笔者的设置如下：
关于android配置，在配置它之前需要先安装jdk，下载好了sdk、ndk、ant工具：
6在这个dialog窗口后选择”下一步”,使用默认的设置。
7查看项目设置，点击”完成”（或在os
x平台上点击完成）
qtcreator生成一个默认的qml文件，在这个文件中可以创建应用程序的主窗口视图。
创建主窗口视图：
在应用程序的主窗口正中央显示一个svg(主窗口视图图形)气泡的图片。
在您的项目中使用被qt sensors例子使用的bluebubble.svg,accel
bubble，您必须从qt安装路径下将它拷贝到项目路径下（和qml文件相同的子目录下）。例如：d:\installed\qt\examples\qt-5.4\sensors\accelbubble\content。图片在resources中有，您也可以使用其它任何类型的图片或者一个qml类型的图片代替（本案例中使用图片bubble.png代替）。
在编辑视图，鼠标右击qml.qrc，选择右键菜单中添加现有文件，将项目中的bubble.png资源添加进去。添加后的效果图如下：
在编辑视图里面，双击main.qml文件，在代码编辑视图中打开它。
2修改applicationwindow类型的属性，指定应用程序的名称，给定applicationwindow的id，设置可见，插入的代码片段如下：
3在导航区域，选中label,按键盘上的delete键删除它。
4在“库” > “qml type”，选择image，并将它拖动到画布上。并在右侧的属性面板里source部分添加图片。
注意：您也可以在”库” > “资源”里看到已经添加进去的资源：
5选中上图中的图片，在属性面板里，id域中键入bubble,使图片能够在其它地方引用它。
6在代码编辑区域，给以下的image添加以下的新的属性，通过这些属性来让将图片定位在应用程序的正中央。
7设置图片位置的x和y的位置，并手动添加图片宽高属性。
6和7步骤后在qml中插入的代码片段如下：
image
{
id:
bubble
source:
"bubble.png"
smooth:
true
property
real
centerx:
mainwindow.width
/ 2
centery:
mainwindow.height
bubblecenter:bubble.width
x:
centerx
- bubblecenter
//图片显示的x坐标
y:
centery
//图片显示的y坐标
width:
100
//图片的宽度
height:
100
//图片的高度
}
如下是您在做出改变后accelbubble.qml文件的样子。
import
qtquick
2.2
qtquick.controls
1.1
applicationwindow
title:
qstr("accelerate
bubble")
id:mainwindow
640
480
visible:
//图片显示的x坐标
y:
//图片显示的y坐标
//图片的高度
到此步运行的结果如下：
既然可视的元素已经在指定位置了，我们可以通过改变加速传感器的值来改变的bubble的位置
1添加以下import声明到main.qml中。
qtsensors
5.3
2添加一个含有必要属性的accelerometer类型的元素到main.qml中。
accelerometer{
id:accel
datarate:
100
active:true
3添加以下的javascript方法，实现基于当前accelerometer的值来计算这个bubble的位置。
function
calcpitch(x,y,z)
return
-(math.atan(y
/ math.sqrt(x
* x
+ z
* z))
* 57.2957795);
calcroll(x,y,z)
-(math.atan(x
/ math.sqrt(y
* y
4为accelerometer类型的onreadingchanged信号添加以下的javascript代码，让bubble随着accelerometer的值变化而移动位置。
onreadingchanged:
var
newx
=
(bubble.x
+ calcroll(accel.reading.x,
accel.reading.y,
accel.reading.z)
* 0.1)
newy
(bubble.y
- calcpitch(accel.reading.x,
//如果newx和newy都是空的，直接返回
if
(isnan(newx)
|| isnan(newy))
return;
//如果newx小于0，让newx
(newx
< 0)
> mainwindow.width
- bubble.width)
- bubble.width
(newy
< 18)
18
> mainwindow.height
- bubble.height)
- bubble.height
bubble.x
= newx
bubble.y
= newy
要想确保bubble的位置总是在屏幕边界内部。如果accelerometer返回的不是一个数值（nan），值将会被忽略，bubble的位置将不产生更新。
在bubble的x和y属性上添加smoothedanimation行为，让它移动的时候看起来是平滑的。
//图片的高度
behavior
on
y
smoothedanimation
easing.type:
easing.linear
duration:
x
锁定设备方向：
默认情况下当设备的方向改变的时候，屏幕默认是跟着旋转的。如果屏幕的旋转方向固定，那么现实的效果会更加好。
将android手机中的旋转属性进行固定住。qt creator中生成的androidmanifest.xml中可以指定它。如果想了解更多关于这方面的信息，请查看“编辑manifest文件”(http://doc.qt.io/qtcreator/creator-deploying-android.html#editing-manifest-files).
在ios平台上，您可以在一个info.plist文件锁定设备的方向，这个plist文件在.pro文件中作为qmakeinfo
plist参数来指定。
添加依赖信息
添加依赖：
更新accelbubble.pro文件，跟上以下库依赖信息：
qt += quick sensors
svg xml
在ios平台上，您必须静态链接上面的库，通过添加插件的名称，明确指定插件qtplugin参数的各各值。为ios构建指定一个qmake范围（在这个qmake里面也包含qmake
info plist参数信息）。
ios {
qtplugin += qsvg qsvgicon qtsensors_ios
qmake_info_plist = info.plist
添加完了依赖以后，选择”构建” > “执行qmake”,将改变应用到项目的makefile文件中去。
添加资源：
您需要添加bluebubble.svg图片文件到要部署到手机设备上的应用程序资源文件夹里去。
选中项目中的qml.qrc文件，右击这个qrc文件，选择”添加现有文件”将bluebubble.svg文件添加进去。
运行应用程序：
应用程序被编译并且将部署到设备上：
1启动android设备上的usb调试功能，或者启动ios设备上的开发者模式。
2将设备连接到开发电脑上。
如果您正在运行的是androidv4.2.2，手机上将弹出一个对话框让您去确定使用允许usb调试模式连接到pc机上。要避免每次连接设备的时候弹出一个对话框，点击”总是允许电脑”,并选择ok.
3在设备上运行应用程序，按ctrl+r。
示例代码：
当您一步步完成之后，main.qml文件看起来应该像下面的样子：
//图片的宽度
smoothedanimation
}
blueubble
"bluebubble.svg"
//注意要让svg图显示在手机上，要在pro文件中添加qt
+=
svg
/ 4
blueubblecenter:blueubble.width
- blueubblecenter
return;
newy
menubar:menubar
menu{
title:qstr("file")
menuitem{
text:qstr("&open")
ontriggered:
console.log("open
action
triggered");
text:qstr("exit")
ontriggered:qt.quit();
}
上面的例子在华为手机上运行的效果图如下：