Flutter SafeArea组件 简述

简单说两句 SafeArea 顾名思义称为 安全区域

作用很简单，解决异形屏幕适配的问题，比如刘海屏遮挡布局元素

原理是通过MediaQuery来检测屏幕尺寸，使应用程序的大小能与屏幕适配。

然后返回了一个Padding Widget 来包裹住我们编写的页面。以保证页面不会被异形屏幕遮挡。

先看个示例代码和效果图

class SafeWidget extends StatefulWidget{
  @override
  _SafeWidgetState createState() => _SafeWidgetState();
}

class _SafeWidgetState extends State<SafeWidget>{

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topCenter ,
      child: Container(
        child: Text(
          "我是一只小脑斧",
          style: TextStyle(
            fontSize: 30,
            color: Colors.red
          ),
        ),
      ),
    );
  }
}

Align2.png

如何解决

看下面的代码和效果图

class SafeWidget extends StatefulWidget{
  @override
  _SafeWidgetState createState() => _SafeWidgetState();
}

class _SafeWidgetState extends State<SafeWidget>{

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child:Align(
          alignment: Alignment.topCenter ,
          child: Container(
            child: Text(
              "我是一只小脑斧",
              style: TextStyle(
                  fontSize: 30,
                  color: Colors.red
              ),
            ),
          ),
        )
    );
  }
}

Align3.png