設(shè)計(jì)稿
- 設(shè)計(jì)按照iPhone6(750*1334)的尺寸，做了一張?jiān)O(shè)計(jì)稿。
- 一套3x圖
-
Android和Ios兩端適配
設(shè)計(jì)稿
問題來了：
一張98*193的圖片，我們應(yīng)該怎樣寫呢？
場景一：寬度直接寫98(Flutter的單位都是dp)
華為榮耀V8測試機(jī)
width: 360dp 1080px
height: 740.67dp 2222px
pixel density: 3.0 屏幕密度比
98在設(shè)計(jì)稿上表示的是px，但是我們在使用Flutter中控件的時(shí)候，單位是dp，所以必須要將設(shè)計(jì)稿上98轉(zhuǎn)換成dp。
MediaQueryData mediaQuery = MediaQuery.of(context);
_pixelRatio = mediaQuery.devicePixelRatio;
_pixel就是手機(jī)的屏幕密度比，在V8上是3.0。
直接寫出現(xiàn)的問題：
Image.asset(width:98,height:103)
那么最終顯示在V8手機(jī)上的寬高就是98x3=294px和103x3=309px。
這么寫我們就是把98和103當(dāng)做了dp，但是設(shè)計(jì)師給的是px單位啊，所以肯定是錯誤的，怎么解決？
這里我們要將設(shè)計(jì)稿上的px單位，轉(zhuǎn)換成代碼中的dp單位。
dp=px/pixel;
98px=98/3=32.67dp
假如我現(xiàn)在寫(98/3)dp，那么在V8上也是98px了。
問題又來了，V8的物理寬度是1080，而設(shè)計(jì)稿的物理寬度是750，也就是說，設(shè)計(jì)稿(750*1334)上的98px肯定不應(yīng)該等于V8(1080x2222)上的144px,而應(yīng)該是
98x1080/750=141.12px
那么一個在iPhone6上的98x103的長方形，在V8上的實(shí)際尺寸應(yīng)該是：
width: 98x1080/750=141.12
height: 103x2222/1334=171.56
這就完了嗎？
假設(shè)設(shè)計(jì)稿上有一個正方形98x98,在V8上的實(shí)際尺寸應(yīng)該是：
width: 98x1080/750=141.12
height: 98x2222/1334=163.23
我尼瑪，這是什么鬼？
問題就在于，手機(jī)之間的density可能是一樣的，但是實(shí)際的屋里尺寸卻不是成比例的。
在這里的體現(xiàn)就是iPhone6(750*1335)和V8(1080 *2222)的物理寬高并不是同比例的。
正方形的解決方法:
對于正方形控件，在計(jì)算的時(shí)候以寬度為標(biāo)準(zhǔn)，在視覺上可以實(shí)現(xiàn)效果,在實(shí)際的尺寸上，高度可能偏低。
