Flutter全面屏适配

笔者在这篇文章ReactNative全面屏(Android)适配问题提及了现在的全面屏问题，不仅是Android平台，IOS平台也是，给我的感觉就是手机越来越长了。

现在的手机长宽比早就不是之前的16：9了，比如iphoneX 的长宽比为13：6，而现在多数的Android手机都到了19.5：9，有的甚至达到了21：9。

基于科技的发展(适配的血泪史),Flutter开发自然也需要注意这个问题。

在Flutter开发中，通常使用Scaffold的appBar和bottomNavigationBar组件的页面是没有适配问题，它内部对全面屏进行了适配。

适配问题主要是出现在没有使用Scaffold的情况下。

看一下这段代码，没有使用Scaffold：

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

    home: Container(

      color: Colors.white,

    child: Column(

    mainAxisAlignment: MainAxisAlignment.spaceBetween,

      children: <Widget>[

        Container(

          color: Colors.lightBlue,

          child: Text('头部'),

        ),

        Container(

          color: Colors.redAccent,

          child: Text('底部'),

        )

      ],

    ),

    )

    );

  }

}

运行效果如下：

可以看到上面和下面的组件已经被遮挡了，这就出现了适配问题，适配的主要问题就是集中在如下两点：

顶部的NavigationBar预留安全区域
底部的NavigationBar预留安全区域

对于以上两种问题，Flutter给出了除上面使用Scaffold，还有如下两种方案：

使用Flutter框架提供的SafeArea,Widget进行包裹组件来适配全面屏，这个组件和ReactNative框架中的SafeAreaView这个组件差不多效果，从两个名字就可以看出来，

最新文章
热门文章

巴特西

Flutter全面屏适配

最新文章

热门文章