企業建站知識推廣知識小程序微信營銷 APP開發前端設計 MindManager 開發語言自媒體

對flutter屏幕適配的一點思考

發表日期：2018-12 文章編輯：小燈瀏覽次數：2900

源碼地址

在進行flutter的布局之中，有這么幾個比較重要的概念:

Logical pixels : 這個是實際布局中所用到的概念，類似于android中的dp

physical pixels(device pixels) : 指的就是物理設備中的像素點

devicePixelRatio : 指的是一個Logical pixels所對應的physical pixels的數量，實際上就是類似于android中的density

flutter提供了非常強大的Layout widgets,實際上配合這些Layout Widget，用Logical pixels這個概念是可以做到在不同分辨率，不同像素密度的屏幕上進行拉伸與縮放而不至于有太大的變形，但這樣做勢必會增加我們適配的難度。

因為flutter對屏幕適配的概念與android的屏幕適配相似，所以可以將android平臺上的屏幕適配的相關經驗移到flutter平臺上。

實際上如果不考慮Logical pixels而只考慮physical pixels,，可以引申出一種拉伸適配的概念，對于一個指定的ui設計稿，可以采取以下這種方式:

designW : 設計稿的寬

designH : 設計稿的高

deviceW : 設備的寬

deviceH : 設備的高

如果我們以寬進行適配，也就說將設計稿的寬拉伸或者縮小到設備的寬，那么可以以如下的公式進行轉換:

dw : 設計稿中某個控件的位置

vw : 最終在實際的設備中的位置

???? $\frac{deviceW}{designW}=\frac{vw}{dw}$

???? $vw = dw * \frac{deviceW}{designW} = vw * x$ 其中 $x=\frac{deviceW}{designW}$

如果我們以高進行適配，也就是說將設計稿的高拉伸或縮小到設備的高，那么與寬拉伸相似:

???? $\frac{deviceH}{designH}=\frac{vw}{dw}$

???? $vw = dw * \frac{deviceH}{designH} = vw * x$ 其中 $x=\frac{deviceH}{designH}$

比如說分辨率為1080x1920的ui稿，要適配到1440x2560的屏幕上，可以這樣做:

寬適配:

???? $x = \frac{deviceW}{designW} = \frac{1440}{1080} = 1.333333333333333$

???? $vx = vw * x$

高適配:

???? $x = \frac{deviceH}{designH} = \frac{2560}{1920} = 1.333333333333333$

???? $vx = vw * x$

經過這樣的計算，可以將設計稿完美的拉伸到任意設備的屏幕上去，但是有一點需要注意，如果目標設備的屏幕的寬高比與設計稿的寬高比不一致，那么會導致如下兩種情況:

?1.如果是寬適配，那么如果目標設備的寬高比小于設計稿的寬高比(也就是說目標設備的屏幕比設計稿長,例如現在的全面屏或劉海屏)那么就會導致有一個部分留白，如果目標設備的寬高比大于大于設計稿的寬高比(例如iphone4這樣的屏幕)那么就會導致導致當前的屏幕無法完全顯示設計稿的內容，這兩種情況就需要在設計界面的時候充分的考慮到，提前做好處理

?2.高適配和寬適配是一樣的，只不過是會產生橫向的留白或者無法完全顯示

適配后的圖片如下:
設計稿 : 寬 1080 高 1920 480dpi
不同設備對應如下 :
pixel | 寬 : 1080 高 1920 480dpi