在上一篇文章,《Qt on Android:QML 语言基础》中,我们介绍了 QML 语言的语法,在最后我们遗留了一些问题没有展开,这篇呢,我们就正式开始撰写 Qt Quick 程序,而那些问题,随着本系列文章的展开也会一一被干掉。
在开始介绍 Qt Quick 应用的基本元素之前,我们先来创建一个 HelloQtQuickApp 项目,就是经典的 Hello World 了。
笔者的教程最终会面向 Qt Quick 与 C++ 混合编程,所以我们
HelloQtQuickApp
从零开始。
创建项目
打开 Qt Creator ,点击文 "件(F)" 菜单,在弹出的菜单列表中选择 "新建文件或项目(N)" 。如下图所示:
如上操作后, Qt Creator 会弹出新建项目界面,让我们选择应用模板。如下面的所示:
这里我们选择 "应用程序" 项目, "Qt Quick Application" 模板。可以看到最右侧的实时提示,说这模板支持 QML 和 C++ 混合编程,这正是我们需要的,因为笔者最终提供的有使用价值的实例就是混合了 QML 和 C++ ,而且我的观点也正是这样:复杂的应用,使用 QML 快速构建界面,使用 C++ 完成关键算法和逻辑。另外还看到支持 Destop 和 Android 两个平台。
点击 "选择(C)..." 按钮,新建项目向导会指引我们进入下一环节 "项目介绍和位置" 。参考下图:
请参考上图,将项目名称设置为 HelloQtQuickApp 。
点击 "下一步" 按钮,跟随向导进入组件选择环节,如图:
请参考图示,选择 Qt Quick 2.0 。
点击 "下一步" 按钮,跟随向导进入构建套件选择("Kit Selection")环节。
我选择了两个套件,"Android for armeabi-v7a (GCC 4.7, Qt 5.2.0)" 和 "Desktop Qt 5.2.0 MinGW 32bit" 。请对照下图检查你的配置。
点击 "下一步" 按钮,跟随向导进入 "项目管理" 环节。在这里你可以选择是否将项目加入版本控制系统(如 svn 之类),还可以看到即将添加到我们的 "HelloQtQuickApp" 项目中的文件。如下图所示:
终于看到 "完成(F)" 按钮了,赶紧点击它!你会看到下面的项目编辑界面(我展开了项目视图以便看到项目中的所有文件):
虽然是一个简单的 Hello World ,向导还是很热情地给我们添加了很多文件,比如 qtquick2applicationviewer.h / qtquick2applicationviewer.cpp / main.cpp / main.qml 。接下来我们做点儿小改动。
运行项目
请把 main.qml 文件中的 "Hello World" 替换为 "Hello Qt Quick App" ,然后直接运行项目,(在电脑上)即可看到下面的效果:
好啦,我们的 HelloQtQuickApp 项目就这么完成了。
在手机上运行
接下来让我们做一些改动以便 HelloQtQuickApp 能够在 Android 手机上运行。
看下图:
首先我们需要点击标号为 1 的标签进入项目属性配置界面;然后点击标号为 2 的按钮,切换到 Android 运行选项;第三步呢,标号 3 的详情按钮点一下,展开部署详情;然后呢,参考标号 4 ,选择 Qt 部署策略为 Use Ministro service to install Qt ;最后一步,就是标号 5 所示按钮,创建 Android 应用需要的 AndroidManifest.xml 文件,点击后看到下面的界面:
直接点击 "完成(F)" 按钮即可。然后就进入了 AndroidManifest.xml 编辑界面:
你可以按照图示,修改应用的包名,笔者修改为 an.qt.helloQtQuickApp ,然后关闭 AndroidManifest 编辑界面时会提示你保存,选择保存所有就行了。
新的项目视图如下:
注意我标注的区域。
现在我们的项目终于完善了,可以在 Android sh上运行了。如对 Qt on Android 项目设置有不明之处,请移步我另外一篇文章——《Qt on Android:图文详解Hello World全过程》,如果你还没搭建好 Qt on Android 开发环境,请参考《Windows下Qt 5.2 for Android开发入门》。
运行项目,会让你选择目标设备,我连接的真机,选择了真机。具体请参考《Qt on Android:图文详解Hello World全过程》。下面是运行效果截图:
看起来没什么吸引人的?不错,确实如此。不过呢,这只是开始,刚刚开始。随着深入学习,你可以自己制作出精美的应用和炫酷的游戏。如果你已经迫不及待了,请把 Qt SDK 中的 Qt Quick 的示例程序找几个出来跑跑看。
哎呀,看起来,对于 Qt Quick 基本元素的介绍只能放到下一次了……
Qt on Android: Qt Quick 之 Hello World 图文详解