Flutter Widget（二）SafeArea

博客地址：flutterall.com

先看代码：

class FlutterAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment(-1, -1),
      child: Container(
        child: Text(
          "Hello",
        ),
      ),
    );
  }
}

普通屏幕运行结果
刘海屏幕运行结果

可以看到，在刘海屏幕中，显示位置不是我们期待的。大部分刘海区域不是我们所触发按钮的区域。这是我们可以使用SafeArea Widget来很好的解决这个问题。

class FlutterAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Align(
        alignment: Alignment(-1, -1),
        child: Container(
          child: Text(
            "Hello",
          ),
        ),
      ),
    );
  }
}

SafeArea处理结果

当然，使用这个Widget也能很好的处理iPhone X类似的底部bottom的区域。

class FlutterAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Align(
        alignment: Alignment(-1, 1),
        child: Container(
          child: Text(
            "Hello",
          ),
        ),
      ),
    );
  }
}

SafeArea处理之后

所以大部分情况下，使用SafeArea能很好的解决刘海，不规则屏幕的显示问题。