Qt移动应用开发（一）：适配不同的屏幕

         到目前为止，Qt5.3已经出现很长一段时间了，并且已经有一些应用使用Qt进行构建了，我自己也完成了第一款使用Qt构建的手机游戏《吃药了》。那么接下来的几篇文章主要向大家分享我是怎样使用Qt进行移动开发的。Qt移动应用开发分为多篇博客文章，每一篇文章都力求精简不罗嗦，力求为大家提供一个快捷的参考。我在这里也主要将使用Qt制作《吃药了》的方法技巧一一分享给大家。

         说到移动应用开发，第一想到的就是Android了，的确。Digia其实在为Qt制定向移动进军的道路的时候充分地考虑了目前移动市场。首先Android是开源的，能够争取到很多软硬件厂商，其次iOS是一款优秀的移动操作系统，最后Windows Phone 7/8也蓄势待发，因此Digia主要在Qt5.0的时候引入了QPA的概念，这让平台适配变得容易起来；Qt5.1的时候实现了Android操作系统的适配；Qt5.2的时候实现了iOS系统的适配；Qt5.3的时候实现了Windows Phone的适配。当然一些小众移动开发平台比如说BB10、Ubuntu Phone和Jolla则是倒贴到Qt上来了。所以至此Qt已经能够适应绝大多数移动平台，再加上嵌入式领域的一枝独秀，Qt事实上已经成为适配平台最多的框架了。

         不过，哪怕是适配Android一个平台，由于Android系统的碎片化以及Android应用是独占屏幕大小的，导致开发者在开发应用的时候不得不考虑屏幕的分辨率。那么Qt是如何想办法实现的不同屏幕的适配呢？如果你是使用纯C++开发的Qt框架，那么我的另外一篇文章可以帮助你。现在我主要介绍一下QML是如何解决的。

1、使用锚布局方式

         QML使用了一种叫锚布局（anchorlayout）的布局方式，这就好比是知道了某个控件的相对位置，然后另外一个控件使用锚布局的方式很快就知道根据此控件该如何摆放。比如说这个截图：

         右下角的“copyright@jcystudio”就是使用锚布局进行排列的：

Text
{
         anchors.bottom:parent.bottom
         anchors.right:parent.right
         text:"copyright©jcystudio"
}

2、使用Screen来获取屏幕分辨率 

使用锚布局可能还不够，因为图片等元素一旦碰上了小分辨率的屏幕就会显示不全，这样的用户体验是很差的，需要缩放才行。那么问题就转化为如何知道屏幕的分辨率大小呢？这里我们采用QtQuick.Window 2.2中的Screen类，即使用Screen.width和Screen.height来获取获取屏幕的大小。

         最后分享一下我开发《吃药了》Android和桌面版适配屏幕分辨率的方法：

Window
{
   id: root
   width: Qt.platform.os === "android"? Screen.width: 320
   height: Qt.platform.os === "android"? Screen.height: 480
……
}

         这段代码的意思是如果当前的操作系统是Android，那么使用Android屏幕的原始分辨率，否则的话采用的是320×480的配置。下面是两幅图的对比：

下面是另一个我开发的应用适配不同分辨率的对比：

         本文已参加《CSDN博文大赛》，请投我一票，支持更多Qt移动开发的原创内容！

2楼lgcacddn5分钟前

沙发顶

1楼aqtata昨天 22:33

我会一直支持你的！敬佩你的钻研精神，我也用Qt，但是不如你。希望以后能多多看到类似文章，帮助Qter共同进步。

Re: jiangcaiyang12333分钟前

回复aqtatan谢谢支持！这篇文章只是第一步，以后还会有更多的原创Qt开发文章出来的。