Flutter全面屏適配

筆者在這篇文章ReactNative全面屏(Android)適配問題說起了如今的全面屏問題，不只是Android平臺，IOS平臺也是，給個人感受就是手機愈來愈長了。 如今的手機長寬比早就不是以前的16：9了，好比iphoneX 的長寬比爲13：6，而如今多數的Android手機都到了19.5：9，有的甚至達到了21：9。 基於科技的發展(適配的血淚史),Flutter開發天然也須要注意這個問題。 在Flutter開發中，一般使用Scaffold的appBar和bottomNavigationBar組件的頁面是沒有適配問題，它內部對全面屏進行了適配。 適配問題主要是出如今沒有使用Scaffold的狀況下。 看一下這段代碼，沒有使用Scaffold：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(    
        primarySwatch: Colors.blue,
      ),
    home: Container(
      color: Colors.white,
    child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          color: Colors.lightBlue,
          child: Text('頭部'),
        ),
        Container(
          color: Colors.redAccent,
          child: Text('底部'),
        )
      ],
    ),
    )
    );
  }
}

運行效果以下：

能夠看到上面和下面的組件已經被遮擋了，這就出現了適配問題，適配的主要問題就是集中在以下兩點：

1. 頂部的NavigationBar預留安全區域
2. 底部的NavigationBar預留安全區域

對於以上兩種問題，Flutter給出了除上面使用Scaffold，還有以下兩種方案：

1. 使用Flutter框架提供的SafeArea,Widget進行包裹組件來適配全面屏，這個組件和ReactNative框架中的SafeAreaView這個組件差很少效果，從兩個名字就能夠看出來，😀。
2. 能夠經過Flutter系統提供的MediaQuery.of(context).padding 這個Api來獲取上下左右的安全padding,根據這個padding進行適配，更加靈活性。

接下來具體看一下這兩個方案的使用

使用SafeArea適配

這個使用比較簡單，只要須要將組件進行包裹便可，

home: SafeArea(child: Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            color: Colors.lightBlue,
            child: Text('頭部'),
          ),
          Container(
            color: Colors.redAccent,
            child: Text('底部'),
          )
        ],
      ),
    ))

使用MediaQuery.of(context).padding適配

home位置修改成以下代碼：
home: SafePage()
-------------------
建立一個SafePage
class SafePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    EdgeInsets paddings = MediaQuery.of(context).padding;
    return Container(
        color: Colors.white,
        padding: EdgeInsets.fromLTRB(0, paddings.top, 0, paddings.bottom),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              color: Colors.lightBlue,
              child: Text('頭部'),
            ),
            Container(
              color: Colors.redAccent,
              child: Text('底部'),
            )
          ],
        ),
    );
  }
}

以上兩種方案運行效果以下圖，能夠看到頭部和底部已經正常顯示了。

上面這兩種方案適用於IOS和Android兩個平臺，對於Android平臺的適配在ReactNative全面屏(Android)適配問題也提到了另外的一種方案，看你們的實際須要，來採起合適的適配方案。

查看一下SafeArea這個Widget組件的源碼，能夠看到其實內部也是採用了上面提到的第二種方案，至關於SafeArea對第二種方案的封裝，開發中使用起來更方便一下，源碼以下

@override
  Widget build(BuildContext context) {
    assert(debugCheckHasMediaQuery(context));
    /// 以下五行代碼就是SafeArea能夠進行適配的緣由，
    final MediaQueryData data = MediaQuery.of(context);
    EdgeInsets padding = data.padding;
    // Bottom padding has been consumed - i.e. by the keyboard
    if (data.padding.bottom == 0.0 && data.viewInsets.bottom != 0.0 && maintainBottomViewPadding)
      padding = padding.copyWith(bottom: data.viewPadding.bottom);

    return Padding(
      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,
      ),
    );
  }

截圖可能看起來更方便，注意看紅框部分

關於Flutter的全面屏適配先分享這些。

歡迎關注個人公衆號：君偉說。分享移動開發技術，職場生活和工做中的酸甜苦辣。

原文出處：https://www.cnblogs.com/wayne6688/p/12214767.html