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