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