×
Namespaces

Variants
Actions

用Qt Quick制作一个Symbian程序

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
平台:
Symbian

文章
zhouhl 在 18 Nov 2010 创建
最后由 hamishwillee 在 16 Feb 2012 编辑


Contents

引言

作为一种强大的高级用户界面技术,Qt Quick (Qt User Interface Creation Kit) 被用来做开发是快速而高效的,恰巧也是“Quick”的含义。开发者不需要具备C++等编程语言知识就可以开发出非常炫的应用来,且可以在绝大多数桌面和手机平台上运行。

作为入门,本文将以Symbian平台为例,介绍如何使用 Qt Quick 开发程序。本文样例程序在N8上的运行效果见文后截图,这仅需要简单的几行文字就可以做出来了,本文样例程序的sis和源代码可通过末尾所附链接下载

配置开发环境

首先我们需要配置开发环境,详情请参阅Qt Quick开发环境搭建

新建Qt Quick工程

通过上一步安装好开发环境后,我们就可以正式开始开发了。 首先打开Qt Creator。然后选择File->New File or Project:

Start.PNG


这时候会弹出来一个对话框,我们在Project中选择“Qt Quick Project”,然后在右面选择“Qt Quick Application”,最后点击“Choose”按钮。

Start2.PNG

这一步我们需要给我们的程序起一个名字,比如叫“quickApp”,于是我们在Name后面填“quickApp”。接着选择我们的工程所在的目录,比如我们想把我们的工程放到C盘QtQuickProject文件夹下,于是我们就在“Created in”后面选择C:\QtQuickProject。最后我们点击next按钮,进入下一步。 QuickApp1.PNG



这一步需要选择我们程序所用的Qt版本。安装过 Qt SDK 1.1 之后会出现这么几个选项(后缀带有“(Qt SDK)"的都是),如果我们的目标平台是Symban^3 手机 (如N8) 就选 "Qt 4.7.1 for Symban^3 (Qt SDK)" ,除此之外都选择Symban^1
。 这里我们还多选了desktop 和 Simulator,也就是桌面和模拟器版,在安装到手机之前(或者当我们身边没有手机可以用时),我们可以切换到这些版本进行调试和预览。最后我们点击next按钮,进入下一步。 QuickApp2.PNG



这一步是设置程序是否自动横竖屏切换以及程序图标的,我们什么都不需要改动,一切按照默认设置即可。直接点击next按钮,进入下一步。 QuickApp3.PNG



这一步也不需要做任何改动(默认是选择generate a main.qml file),直接点击next按钮,进入下一步。 QuickApp4.PNG



这一步也不需要做任何改动(主要作用是列出所生成的文件供用户确认),直接点击Finish按钮,完成新建项目。 QuickApp5.PNG

修改main.qml

上一步点击Finish按钮完成后,视图会自动切换到编辑main.qml的状态,如下图所示:

QuickApp6.PNG


这些代码都是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: { myText.xAngle = myText.xAngle + 1;
myText.yAngle = myText.yAngle + 1.5;
myText.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" }
}
}
 
}

下面是修改过后的样子:

Pic1.PNG

其中左边红框标注的“main.qml”代表现在右边编辑界面打开的是文件“main.qml”,而代码中红框标注的 "pics/background.jpg"代表引用的是一张本地图片,我们下面需要把这张图片加进我们的工程。

添加图片

添加图片变得比以往任何时候都容易,我们只需要将合适的图片拷贝到恰当的目录就一切OK了。 首先我们在我们的工程目录下的qml\quickApp下面新建一个用于存放图片的文件夹,比如我们将其命名为pics,如下图所示:

Pic2.PNG


最后我们进入pics文件夹,将我们的图片拷贝进去。我们这里的图片叫background.jpg,大家的图片当然可以是任意其他名字,比如”yourPicturename.xxx“,不过此时大家一定记得把main.qml文件中的”background.jpg‘修改成对应的”yourPicturename.xxx“。图片也可以是其他格式的,比如png、gif、bmp等。如下图所示:

Pic4.PNG



在N8上运行

到此为止我们的程序就全部做完了,下面就是编译运行看一下效果了。

要在手机上测试,我们需要先将目标平台切换成Symbian Device, 如下图所示:

BuildSymbainDevice.PNG

其次我们需要把我们的手机用 USB 线连接到计算机(计算机需要装有Ovi suite, 手机需要安装Qt 4.7的库,以及Debug用的TRK,详情参阅Qt Quick开发环境搭建),然后我们点击Creator界面上的 run按钮(一个横着放的绿色三角图标),如下图所示:

Build.PNG

这样Creator会为我们在C:\QtQuickProject\quickApp目录下生成一个名为 quickApp.sis 的自签名的文件(这个sis就可以安装到所有装有Qt4.7库的Symbian手机并运行了)。

点击完运行按钮之后我们观察我们的手机,过一会我们就会看到程序启动了,并会看到Qt Quick!这几个字不停的以一种3D效果在旋转:

P11.jpg



下载示例程序

Media:quickApp.zip


相关链接

This page was last modified on 16 February 2012, at 07:40.
95 page views in the last 30 days.