本文參考文章：Scalable UIs In QML
用戶體驗不再枯燥單一
我們常常需要應(yīng)用從一個設(shè)備平滑過渡到另外的設(shè)備习贫，在這個過程中我們的交互和整體外觀保持基本不變蹬耘。
在設(shè)計和開發(fā)人員為我們創(chuàng)造出自適應(yīng)的跨設(shè)備和平臺的用戶接口的同時碎连，在每個平臺中為了滿足用戶體驗上的需求否过，我們也需要大量的可定制接口汽摹。
這些只是在為跨平臺部署應(yīng)用程序時需要考慮的幾個問題李丰。一勞永逸似乎是一件不可能完成的任務(wù)。在接下來的一系列帖子中逼泣，我將分享我的經(jīng)驗趴泌，用我所了解的一些知識來完善這個主題，以及如何用 QML 進(jìn)行實現(xiàn)拉庶。
可擴(kuò)展性
不幸的是嗜憔，我們沒有任何可以將 Windows 8 桌面應(yīng)用轉(zhuǎn)換成 iOS touch 應(yīng)用或者嵌入式設(shè)備應(yīng)用的 “一次設(shè)計，任意部署” 的魔法氏仗。通過指定 x 和 y 軸上的像素數(shù)量將應(yīng)用程序從 4 英寸屏幕縮放到 27 英寸屏幕（使它們看起來一樣）并不簡單吉捶。通常用戶在不同的設(shè)備上想要看到的是不一樣的。
在同一平臺上擴(kuò)展相同的應(yīng)用程序
讓我們從簡單的任務(wù)開始皆尔，在一個平臺上處理應(yīng)用呐舔。例如在 Android 平臺上，在理論上慷蠕，我們設(shè)計并實現(xiàn)一個 UI珊拼，會期望它可以用一種方式在基于這個平臺的所有的設(shè)備上完美的工作。我們可以使用簡單的 QtQuick.Controls 控件砌们，使應(yīng)用看起來是像是原生的杆麸，并且也可以很好地擴(kuò)展；但是這里存在一個問題：當(dāng)我們想要將某些概念需求轉(zhuǎn)換為用戶可以“理解”其用途的 UI 控件的時候浪感，有限的 QtQuick.Controls 控件卻可能無法滿足要求昔头。但此時正是 QML 展現(xiàn)它的強大的時候，因為使用 QML 可以很簡單地創(chuàng)建出滿足我們需要的自定義控件影兽。
假設(shè)：我們要用樂高拼湊一個景觀揭斧，很快就要大功告成了，但是突然發(fā)現(xiàn)，我們手頭缺少一個三角形的拼塊讹开。如果我們當(dāng)前的平臺不存在這個“三角形”盅视，我們可能需要跨平臺的尋找解決方案，然后繼承和構(gòu)建它旦万，一直累倒吐血闹击，才能勉強滿足需要。但是成艘，使用 QML 我們可以輕松地實現(xiàn)我們的需要赏半。
我們的問題是什么？
在桌面世界中淆两，大多數(shù)屏幕直到最近断箫，相當(dāng)類似的ppi（每英寸像素），差距被用戶眼睛的距離減輕了很多倍秋冰。較大的屏幕具有較小的ppi仲义，但遠(yuǎn)離用戶的眼睛。這意味著設(shè)計任何東西的基本指標(biāo)是“像素”剑勾。在幾個桌面操作系統(tǒng)中埃撵，顯然使用不同指標(biāo)的字體實際上是使用像素的，ppi 的邏輯值是硬編碼的甥材。為了避免從屏幕 A 更改為屏幕 B 時出現(xiàn)字體大小盯另，小部件大小比例的變化的情況，ppi 的范圍是相當(dāng)有限的...
但是在 Android 平臺洲赵，這種平衡似乎被打破了，搭載 Android 的設(shè)備是出了名的多商蕴，它們通常長得各式各樣叠萍，分辨率也常常是各不相同，例如绪商，現(xiàn)在我們有如下兩種分辨率的設(shè)備：
如果苛谷，我們僅僅使用 BorderImage 處理一張圖片，而不做其他任何處理格郁，那么我們常常會得到如下的顯示效果：
很顯然腹殿，這并不是我們想要的效果。有多種方法來解決這個問題例书，而我們的計劃是在下面的帖子中談?wù)撍麄兟辔荆驗樵谖铱磥恚鶕?jù)具體問題可以使用不同的方法决采。然而自沧，為了做到這一點，我們需要從概念和渲染像素的角度來揭露和理解這些相同的問題树瞭。
通常的方法
解決這個問題的最常見的方法是通過使用幾個不同的源圖像拇厢，這些源圖像是與 ppi 范圍度量值相對應(yīng)的爱谁。
更具體的方法，可以參考下一篇文章 QML 中的縮放（2）：像素孝偎。
