Flutter SafeArea – 异形屏适配利器

相信现在大部分的人已经了解过 Flutter. 如果还没有，那么可以去 Flutter官网 了解一下

现有手机可能会出现的问题

现在的手机已经不是方方正正的屏幕了，所以我们在写一些UI的时候可能会出现如下问题：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: ListView.builder(itemBuilder: (context, index) {
      return SizedBox(
        height: 30,
        child: Text(
          'Data',
          style: TextStyle(fontSize: 18),
        ),
      );
    }),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );
}

如何解决

为了解决这个问题，Flutter 引入了 SafeArea（安全区域），我们只需要在代码中加入SafeArea

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(  // 加入SafeArea
        child: ListView.builder(itemBuilder: (context, index) {
          return Padding(
            padding: EdgeInsets.only(left: 10, bottom: 18),
            child: Text(
              'Data',
              style: TextStyle(fontSize: 18),
            ),
          );
        }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

可以看到问题已经被解决。

我们还可以仅指定特定的某一位置：

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

原理是什么

我们点进 SafeArea 的源码查看 build 方法

  Widget build(BuildContext context) {
    assert(debugCheckHasMediaQuery(context));
    // 这里获取到padding
    final EdgeInsets padding = MediaQuery.of(context).padding;
    return Padding( // 返回了一个 Padding widget
      padding: EdgeInsets.only(
        left: math.max(left ? padding.left : 0.0, minimum.left),
        top: math.max(top ? padding.top : 0.0, minimum.top),
        right: math.max(right ? padding.right : 0.0, minimum.right),
        bottom: math.max(bottom ? padding.bottom : 0.0, minimum.bottom),
      ),
      child: MediaQuery.removePadding(
        context: context,
        removeLeft: left,
        removeTop: top,
        removeRight: right,
        removeBottom: bottom,
        child: child,
      ),
    );
  }

可以看到SafeArea通过MediaQuery来检测屏幕尺寸，使应用程序的大小能与屏幕适配。

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