Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

用Qt Quick制作一个Symbian程序

From 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 04:40.
681 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×