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 來包裹住我們編寫的頁面。這樣我們的頁面就不會被異形螢幕給遮擋住了。