使用Qt Quick制作一個Symbian程序
本文講解的是如何使用Qt Quick制作一個Symbian程序，作為一種強大的高級用戶界面技術(shù)，Qt Quick (Qt User Interface Creation Kit) 被用來做開發(fā)是快速而高效的，恰巧也是“Quick”的含義。開發(fā)者不需要具備C++等編程語言知識就可以開發(fā)出非常炫的應(yīng)用來，且可以在絕大多數(shù)桌面和手機平臺上運行。
作為入門，本文將以Symbian平臺為例，介紹如何使用 Qt Quick 開發(fā)程序。本文樣例程序在N8上的運行效果見文后截圖，這僅需要簡單的幾行文字就可以做出來了，本文樣例程序的sis和源代碼可通過末尾所附鏈接下載
配置開發(fā)環(huán)境
首先我們需要配置開發(fā)環(huán)境，詳情請參閱Qt Quick開發(fā)環(huán)境搭建。
新建Qt Quick工程
通過上一步安裝好開發(fā)環(huán)境后，我們就可以正式開始開發(fā)了。首先打開Qt Creator。然后選擇File->New File or Project:
這時候會彈出來一個對話框，我們在Project中選擇“Qt Quick Project”，然后在右面選擇“Qt Quick Application”，***點擊“Choose”按鈕。
這一步我們需要給我們的程序起一個名字，比如叫“quickApp”，于是我們在Name后面填“quickApp”。接著選擇我們的工程所在的目錄，比如我們想把我們的工程放到C盤QtQuickProject文件夾下，于是我們就在“Created in”后面選擇C:\QtQuickProject。***我們點擊next按鈕，進入下一步。
這一步需要選擇我們程序所用的Qt版本。安裝過 Qt SDK 1.1 之后會出現(xiàn)這么幾個選項（后綴帶有“（Qt SDK）"的都是），如果我們的目標平臺是Symban^3 手機 （如N8） 就選 "Qt 4.7.1 for Symban^3 (Qt SDK)" ，除此之外都選擇Symban^1 。這里我們還多選了desktop 和 Simulator，也就是桌面和模擬器版，在安裝到手機之前（或者當我們身邊沒有手機可以用時），我們可以切換到這些版本進行調(diào)試和預(yù)覽。***我們點擊next按鈕，進入下一步。
這一步是設(shè)置程序是否自動橫豎屏切換以及程序圖標的，我們什么都不需要改動，一切按照默認設(shè)置即可。直接點擊next按鈕，進入下一步。
這一步也不需要做任何改動（默認是選擇generate a main.qml file），直接點擊next按鈕，進入下一步。
這一步也不需要做任何改動（主要作用是列出所生成的文件供用戶確認），直接點擊Finish按鈕，完成新建項目。 
#p#
修改main.qml
上一步點擊Finish按鈕完成后，視圖會自動切換到編輯main.qml的狀態(tài)，如下圖所示：
這些代碼都是IDE自動為我們生成的，我們需要先刪掉原程序中第3行到第16行的代碼，然后添加一些我們自己的代碼，修改過后main.qml如下所示：
- import Qt 4.7 Rectangle {
- width: 360; height: 640 //width: 640; height: 360
- Image {
- id: background
- smooth: true // Smoothens scaling
- width: parent.width
- source: "pics/background.jpg"
- opacity: 0.8 // 1.0 = opaque, 0.0 = transparent
- }
- Text {
- id: myText
- property double xAngle: 0; property double yAngle: 0;
- property double zAngle: 0 text: "Qt Quick!";
- font.pointSize: 80; color: Qt.rgba(0, 64, 255, 1) ;
- anchors.centerIn: parent transform: [Rotation {
- origin.x: myText.width/2; origin.y: myText.height/2; axis {x:1; y:0; z:0} angle:myText.xAngle },
- Rotation {
- origin.x: myText.width/2; origin.y: myText.height/2; axis {x:0; y:1; z:0} angle:myText.yAngle
- },
- Rotation { origin.x: myText.width/2; origin.y: myText.height/2; axis {x:0; y:0; z:1} angle:myText.zAngle }]
- }
- Timer {
- interval: 30; running: true; repeat: true
- onTriggered: { myTextmyText.xAngle = myText.xAngle + 1;
- myTextmyText.yAngle = myText.yAngle + 1.5; myTextmyText.zAngle = myText.zAngle + 2.5
- }
- }
- Rectangle {
- id: container
- anchors.bottom: parent.bottom; anchors.right: parent.right
- signal clicked
- width: label.width + 36; height: label.height + 8
- smooth: true
- radius: 10
- gradient: Gradient {
- GradientStop { id: gradientStop; position: 0.0; color: "orange" }
- GradientStop { position: 1.0; color: "#ff6200" }
- }
- SystemPalette { id: palette }
- MouseArea {
- id: mouseArea
- anchors.fill: parent
- onClicked: { Qt.quit(); container.clicked();
- }
- }
- Text {
- id: label
- anchors.centerIn: parent
- color: "white"
- text: "Exit"
- font.pointSize: 9;
- }
- states: State {
- name: "pressed"
- when: mouseArea.pressed
- PropertyChanges { target: gradientStop; color: "yellow" }
- }
- }
- }
下面是修改過后的樣子：
其中左邊紅框標注的“main.qml”代表現(xiàn)在右邊編輯界面打開的是文件“main.qml”，而代碼中紅框標注的 "pics/background.jpg"代表引用的是一張本地圖片，我們下面需要把這張圖片加進我們的工程。
#p#
添加圖片
添加圖片變得比以往任何時候都容易，我們只需要將合適的圖片拷貝到恰當?shù)哪夸浘鸵磺蠴K了。首先我們在我們的工程目錄下的qml\quickApp下面新建一個用于存放圖片的文件夾，比如我們將其命名為pics，如下圖所示：
***我們進入pics文件夾，將我們的圖片拷貝進去。我們這里的圖片叫background.jpg，大家的圖片當然可以是任意其他名字，比如”yourPicturename.xxx“，不過此時大家一定記得把main.qml文件中的”background.jpg‘修改成對應(yīng)的”yourPicturename.xxx“。圖片也可以是其他格式的，比如png、gif、bmp等。如下圖所示：
在N8上運行
到此為止我們的程序就全部做完了，下面就是編譯運行看一下效果了。要在手機上測試，我們需要先將目標平臺切換成Symbian Device， 如下圖所示：
其次我們需要把我們的手機用 USB 線連接到計算機（計算機需要裝有Ovi suite, 手機需要安裝Qt 4.7的庫，以及Debug用的TRK，詳情參閱Qt Quick開發(fā)環(huán)境搭建），然后我們點擊Creator界面上的 run按鈕（一個橫著放的綠色三角圖標），如下圖所示：
這樣Creator會為我們在C:\QtQuickProject\quickApp目錄下生成一個名為 quickApp.sis 的自簽名的文件（這個sis就可以安裝到所有裝有Qt4.7庫的Symbian手機并運行了）。
點擊完運行按鈕之后我們觀察我們的手機，過一會我們就會看到程序啟動了，并會看到Qt Quick!這幾個字不停的以一種3D效果在旋轉(zhuǎn)：
小結(jié)：使用Qt Quick制作一個Symbian程序的內(nèi)容介紹完了，不過你如果對這個程序感興趣的話，不妨演練一遍，效果還是蠻好的。
