建站
咨詢
售后
建站咨詢
新聞中心
小于1像素的渲染探究
下圖看起來和使用Container做的線顯示效果一樣
創(chuàng)新互聯(lián)服務(wù)項目包括鼎城網(wǎng)站建設(shè)、鼎城網(wǎng)站制作、鼎城網(wǎng)頁制作以及鼎城網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鼎城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鼎城省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
Flutter 官方對解釋的不是很清楚
通過測試對比發(fā)現(xiàn)Flutter在渲染小于1邏輯像素的線的時候，其高度是按1邏輯像素去展示的，只不過看到的顏色會不一樣，當設(shè)置線的高度不是整數(shù)邏輯像素時，線的高度是線上取整后的邏輯像素，只不過看到的線上下邊緣的顏色會隨著小數(shù)部分的值越大顏色越接近設(shè)置的顏色。也就是說flutter是以1邏輯像素的整數(shù)倍去顯示的，如果是非整數(shù)倍邏輯像素線上下邊緣的顏色會跟設(shè)置的不一樣（以灰度的方式顯示出來）。
ios 原生目前也可以展示小于1物理像素的點，但是以UIView的控件做的線，其高度有個臨界值，低于臨界值的線會顯示不出來，而且其顯示的線邊緣比較銳利，其高度在到某一臨界值后會直接變高，而不是在線上下邊緣做灰度展示。而用原生繪制出來的線展示小于以邏輯像素的時候其高度均展示為1邏輯像素，不過顏色值會以灰度的方式展示出來，在達到邏輯像素的整數(shù)倍時展示設(shè)置的顏色，這是和flutter一樣的。
比如拿iPhone 6s 舉例，其屏幕寬度是2.3英寸，橫向上有750顆像素點，ppi = 750/2.3 = 326，既每寸上有326個物理像素，換算成厘米也就是 326/2.54 = 128.35，也就是說每厘米上有128.35個物理像素點，每毫米有13個物理像素點，也就是每個物理像素點的寬度是0.077毫米。6s 的邏輯寬度是375，橫向上每厘米有375/(2.3*2.54) = 64邏輯像素/cm，也就是6s上每個邏輯像素的寬度是0.156毫米。當我們設(shè)置一邏輯像素寬度時其在6s上對應(yīng)的寬度是0.156毫米。
Flutter MediaQuery獲取屏幕信息以及屏幕適配
Flutter中控件的高寬和字體大小時，使用的是邏輯像素，并非是實際的物理像素。
flutter中的屏幕適配
假設(shè)設(shè)計圖的大小為1080 1920，上面一個圖片的高度為 80 90，則它在設(shè)備上的高寬為
對于android手機，一般以寬度為基準計算UI的高寬，因為android手機的寬度一般就是750，1080等幾個尺寸，但是高的尺寸就有很多。
推薦一個別人封裝好的一個用于屏幕適配的庫
Flutter屏幕適配方案插件-完美解決屏幕適配
Flutter_圖片分辨率適配及批量拓展使用
flutter開發(fā)中，圖片的引用是必不可少的，所以為了提高效率和精準度，我們需要對不同分辨率的手機使用相對應(yīng)的切圖圖片，本章介紹如何進行 圖片分辨率適配 和 圖片批量拓展處理 。
flutter中會首先根據(jù)系統(tǒng)的devicePixelRatio（每一個邏輯像素包含多少個原始像素，可以通過MediaQueryData.devicePixelRatio來得到）來找對應(yīng)倍數(shù)的文件夾下的圖片，如果沒有對應(yīng)倍數(shù)，找最接近的。
所以在flutter項目中，我們需要構(gòu)建對應(yīng)的倍數(shù)像素文件夾
之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，會自動適配該像素下最接近的jay圖片）。
使用flutter-img-sync插件批量化處理，具體操作如下
目前還不能處理gif、webp等格式的圖片，而且如果和上邊介紹的不同像素比適配方案一起使用的話，由于進行了精準定位，所以指定圖片后就不能進行像素適配，這是目前還存在的較大問題，所以目前兩者方案只能暫時取一使用。
Flutter實踐--屏幕適配
做移動端開發(fā)的小伙伴都知道，針對不同型號和尺寸的手機要進行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進行適配呢？以下為近期flutter開發(fā)過程中關(guān)于適配的一些學習和記錄~~~~
說到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說以下幾點????
默認寬1080px
默認高1920px
allowFontScaling為false，即不跟隨系統(tǒng)字體大小設(shè)置變化
初始化單位為px
需要把context傳進去，因為內(nèi)部是通過 MediaQuery 來獲取屏幕尺寸等相關(guān)信息的
無需再傳context，因為內(nèi)部是通過單例 window 來獲取屏幕尺寸等相關(guān)信息的
作為iOS開發(fā)，之前都是以pt為參照進行比例適配的，且架構(gòu)組已經(jīng)定義了一套適配相關(guān)常量，傳px進去不太方便，所以需要對flutter_screenutil進行擴展
公司設(shè)計圖是以iPhone X的尺寸提供的即物理設(shè)備尺寸為375x812，像素比例為750x1624,像素密度比為2
初始化仍用px來初始化
dart sdk 2.7正式支持 extension-method ，即為已有類擴展方法，從 flutter_screenutil 這種 540.w 寫法點進去，我們可以看到
flutter_screenutil為num類擴展了一系列簡寫方法，那我們當然可以按照它這種方式進行擴展
網(wǎng)上提供的解決方案：
第一步：修改 pubspec.yaml
第二步：執(zhí)行 flutter pub get
第三步：重啟 AndroidStudio
解決方案：去掉const即可
UI設(shè)計中px、pt、ppi、dpi、dp、sp之間的關(guān)系
Dart/Flutter - 擴展方法(ExtensionMethod)
標題名稱：flutter像素,簡書 flutter
網(wǎng)頁路徑：http://www.ef60e0e.cn/article/dsehcgs.html
