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的使用_第1张图片

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

SafeArea的使用_第2张图片

 

参考文章:

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

你可能感兴趣的:(Flutter)