Qt Quick 之 Hello World 图文详解

版权声明:本文为foruok原创文章,转载请通过订阅号“程序视界”联系foruok获取授权。 https://blog.csdn.net/foruok/article/details/28850879

    在上一篇文章,《QML 语言基础》中,我们介绍了 QML 语言的语法,在最后我们遗留了一些问题没有展开,这篇呢,我们就正式开始撰写 Qt Quick 程序,而那些问题,随着本系列文章的展开也会一一被干掉。

    在开始介绍 Qt Quick 应用的基本元素之前,我们先来创建一个 HelloQtQuickApp 项目,就是经典的 Hello World 了。

    版权所有 foruok,转载请注明出处:http://blog.csdn.net/foruok

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 的示例程序找几个出来跑跑看。

    版权所有 foruok,转载请注明出处:http://blog.csdn.net/foruok

    

    哎呀,看起来,对于 Qt Quick 基本元素的介绍——《Qt Quick 简单教程》——只能放到下一次了……

展开阅读全文

没有更多推荐了,返回首页