這個手冊描述了使用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();
}
上面的例子在華為手機上運作的效果圖如下：