QML 中的缩放（1）

本文参考文章：Scalable UIs In QML

用户体验不再枯燥单一

我们常常需要应用从一个设备平滑过渡到另外的设备，在这个过程中我们的交互和整体外观保持基本不变。

在设计和开发人员为我们创造出自适应的跨设备和平台的用户接口的同时，在每个平台中为了满足用户体验上的需求，我们也需要大量的可定制接口。

这些只是在为跨平台部署应用程序时需要考虑的几个问题。一劳永逸似乎是一件不可能完成的任务。在接下来的一系列帖子中，我将分享我的经验，用我所了解的一些知识来完善这个主题，以及如何用 QML 进行实现。

可扩展性

不幸的是，我们没有任何可以将 Windows 8 桌面应用转换成 iOS touch 应用或者嵌入式设备应用的 “一次设计，任意部署” 的魔法。通过指定 x 和 y 轴上的像素数量将应用程序从 4 英寸屏幕缩放到 27 英寸屏幕（使它们看起来一样）并不简单。通常用户在不同的设备上想要看到的是不一样的。

在同一平台上扩展相同的应用程序

让我们从简单的任务开始，在一个平台上处理应用。例如在 Android 平台上，在理论上，我们设计并实现一个 UI，会期望它可以用一种方式在基于这个平台的所有的设备上完美的工作。我们可以使用简单的 QtQuick.Controls 控件，使应用看起来是像是原生的，并且也可以很好地扩展；但是这里存在一个问题：当我们想要将某些概念需求转换为用户可以“理解”其用途的 UI 控件的时候，有限的 QtQuick.Controls 控件却可能无法满足要求。但此时正是 QML 展现它的强大的时候，因为使用 QML 可以很简单地创建出满足我们需要的自定义控件。

假设：我们要用乐高拼凑一个景观，很快就要大功告成了，但是突然发现，我们手头缺少一个三角形的拼块。如果我们当前的平台不存在这个“三角形”，我们可能需要跨平台的寻找解决方案，然后继承和构建它，一直累倒吐血，才能勉强满足需要。但是，使用 QML 我们可以轻松地实现我们的需要。

我们的问题是什么？

在桌面世界中，大多数屏幕直到最近，相当类似的ppi（每英寸像素），差距被用户眼睛的距离减轻了很多倍。较大的屏幕具有较小的ppi，但远离用户的眼睛。这意味着设计任何东西的基本指标是“像素”。在几个桌面操作系统中，显然使用不同指标的字体实际上是使用像素的，ppi 的逻辑值是硬编码的。为了避免从屏幕 A 更改为屏幕 B 时出现字体大小，小部件大小比例的变化的情况，ppi 的范围是相当有限的...

但是在 Android 平台，这种平衡似乎被打破了，搭载 Android 的设备是出了名的多，它们通常长得各式各样，分辨率也常常是各不相同，例如，现在我们有如下两种分辨率的设备：

设备屏幕信息

如果，我们仅仅使用 BorderImage 处理一张图片，而不做其他任何处理，那么我们常常会得到如下的显示效果：

显示效果

很显然，这并不是我们想要的效果。有多种方法来解决这个问题，而我们的计划是在下面的帖子中谈论他们，因为在我看来，根据具体问题可以使用不同的方法。然而，为了做到这一点，我们需要从概念和渲染像素的角度来揭露和理解这些相同的问题。

通常的方法

解决这个问题的最常见的方法是通过使用几个不同的源图像，这些源图像是与 ppi 范围度量值相对应的。

更具体的方法，可以参考下一篇文章 QML 中的缩放（2）：像素。