flutter屏幕适配SafeArea

这个是很常用的组件，主要是现在的手机屏幕已经很多不是长方形了。这个组件利用设置padding的方式来保证展示内容在各个机型兼容性地安全展示。

可以设置7个属性

  final bool left;

  final bool top;

  final bool right;

  final bool bottom;

  final EdgeInsets minimum;

  final bool maintainBottomViewPadding;

  final Widget child;

传入的参数left, top, right 和 bottom是bool类型的，默认的是true。当是true时，组件会通过MediaQuery获取到dart:ui.Window.padding(这个值是从操作系统获取的)的left, top, right 和 bottom来做对应的设置。

如果设置了minimum，会和dart:ui.Window.padding进行分别对比，取其中大值。

maintainBottomViewPadding 这个属性很少用到，最常用的场景和键盘有关，默认是false。如果没有设置成true, 如果在SafeArea上有键盘弹出，那时SafeArea的获取的dart:ui.Window.padding的bottom会是零，导致这个页面的UI会有移动。下面有代码demo(注意Scaffold的resizeToAvoidBottomInset要设置成false):

Scaffold(

      resizeToAvoidBottomInset: false,

      body: SafeArea(

        maintainBottomViewPadding: true,

        child: Container(

            child: Column(

              children: <Widget>[

                Container(

                  height: 100

                ),

                Container(

                  height: 110,

                  color: Colors.red,

                ),

                Flexible(

                  child: Container(

                    color: Colors.yellow,

                  ),

                ),

                Container(

                  color: Colors.blue,

                  child: TextField(),

                ),

                Flexible(

                  child: Container(

                    color: Colors.green,

                  ),

                ),

                Flexible(

                  child: Container(

                    color: Colors.green,

                  ),

                ),

              ],

            ),

          ),

        )

    );

child,这个组件就是保证child的widget内容安全展示，就不赘述了。

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。