Flutter Widgets 之 SafeArea

注意：无特殊说明，Flutter版本及Dart版本如下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

现如今的手机已经不能提供给应用程序规整的矩形界面了，一些带圆角或者是刘海屏让应用程序的布局更加复杂，甚至是需要单独适配，这对开发者来来太糟糕了。

因此SafeArea控件应用而生，SafeArea通过MediaQuery检测屏幕的尺寸使应用程序的大小与屏幕适配。

创建一个铺满全屏的ListView，并显示数据，代码如下：

ListView(
      children: List.generate(100, (i) => Text('老孟，一个有态度的程序员')),
    )

效果如图：

底部的数据明显被遮挡了，想要解决这个问题只需将ListView包裹在SafeArea中即可，代码如下：

SafeArea(
      child: ListView(
        children: List.generate(100, (i) => Text('老孟，一个有态度的程序员')),
      ),
    )

效果如图：

我们甚至可以指定显示区域，默认情况下上下左右都是指定区域，如下代码去掉左侧区域：

SafeArea(
    left: false,
    child: ListView(),
)

更多相关阅读：

• Flutter系列文章总览
• Flutter Widgets 之 Container
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

如果这篇文章有帮助到您，希望您关注我的公众号，谢谢。