SafeArea的使用

一、背景

现在的手机屏幕尺寸外观多种多样，显示区域不再是方方正正的，一些带圆角或者是刘海屏让应用程序的布局更加复杂，甚至是需要单独适配，这对开发者来来太糟糕了。

因此SafeArea控件应用而生，SafeArea通过MediaQuery检测屏幕的尺寸使应用程序的大小与屏幕适配，自动避开遮挡区域。

它的原理是通过对被包装元素添加Padding来避开遮挡区域。因此可以分别指定上下左右4个区域是否需要添加Padding，例如下面的代码只在底部和左侧添加Padding用于避开遮挡区域。

SafeArea(
  top: false,
  bottom: true,
  left: true,
  right: false,
),

二、例子

home: Container(
    color: Colors.yellow,
    child: Container(
        alignment: Alignment.topCenter,
        child: Text("测试SafeArea测试SafeArea", style: TextStyle(fontSize: 10),)
    ),
),

效果如下，文字被遮挡了：

添加SafeArea包装以后，会自动避开刘海遮挡区域，显示正常：

 

参考文章：

https://cloud.tencent.com/developer/article/1472092