Flutter屏幕適配研究

Flutter屏幕適配研究

一：展現適配

1. 圖片適配

   a. 不支持.9格式圖片

   b. 支持多分辨率，使用多文件夾區分

   參考Flutter屏幕適配之二：Image資源assets的使用，實現不一樣分辨率圖片的適配

2. 尺寸適配

   a. 沒有相似Android的values-xhdpi的文件夾區分，通常使用動態計算寬高的方式。
   參考對flutter屏幕適配的一點思考

3. 權重適配

   a. 方向

   Android中使用LinearLayout來做爲線性佈局控制佈局方向，Flutter中使用Row和Column來控制。
   複製代碼

   b.填充方式

   Android中使用match_parent和wrap_content，至關於Flutter的MainAxisSize.min 和 MainAxisSize.max
   複製代碼

   c.權重weight

   Android中使用weight，Flutter中是Flexible和 Expanded flex屬性。
   複製代碼

   參考[譯] 如何在 Flutter 中設計 LinearLayout？

   參考flutter Flexible和 Expanded

4. 佈局類型

   參考Widgets 目錄

5. 狀態欄和底部導航條

   import 'dart:ui';
   // 獲取狀態欄高度
   MediaQueryData.fromWindow(window).padding.top
   
   // 控制狀態欄和底部導航條
   SystemChrome.setEnabledSystemUIOverlays([
       SystemUiOverlay.top, // 去除則隱藏狀態欄
       SystemUiOverlay.bottom  // 去除則隱藏底部導航條
   ]);
   複製代碼

   問題：

   目前沒有看到獲取狀態欄是否已顯示的接口。

   當狀態欄隱藏以後，若是頁面有輸入框彈出了鍵盤，狀態欄又會從新展現出來。

6. dialog和toast

   dialog：Android裏面Dialog差很少，context傳入時須要注意

   toast：參考fluttertoast 彈出toast吐司

7. 不規則屏幕適配-劉海屏，底部圓角

   使用SafeArea解決

   參考Flutter SafeArea