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