筆者在這篇文章[ReactNative全面屏(Android)適配問題](CSDN-專業IT技術社區-登錄)提及了現在的全面屏問題，不僅是Android平臺，IOS平臺也是，給我的感覺就是手機越來越長了。
現在的手機長寬比早就不是之前的16：9了，比如iphoneX 的長寬比為13：6，而現在多數的Android手機都到了19.5：9，有的甚至達到了21：9。
基於科技的發展(適配的血淚史),Flutter開發自然也需要注意這個問題。
在Flutter開發中，通常使用Scaffold的appBar和bottomNavigationBar組件的頁面是沒有適配問題，它內部對全面屏進行了適配。
適配問題主要是出現在沒有使用Scaffold的情況下。
看一下這段代碼，沒有使用Scaffold：
<code>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: [ Container( color: Colors.lightBlue, child: Text('頭部'), ), Container( color: Colors.redAccent, child: Text('底部'), ) ], ), ) ); } }/<code>
運行效果如下：
可以看到上面和下面的組件已經被遮擋了，這就出現了適配問題，適配的主要問題就是集中在如下兩點：
1. 頂部的NavigationBar預留安全區域
2. 底部的NavigationBar預留安全區域
對於以上兩種問題，Flutter給出了除上面使用Scaffold，還有如下兩種方案：
1. 使用Flutter框架提供的SafeArea,Widget進行包裹組件來適配全面屏，這個組件和ReactNative框架中的[SafeAreaView](SafeAreaView · React Native 中文網)這個組件差不多效果，從兩個名字就可以看出來，。
2. 可以通過Flutter系統提供的MediaQuery.of(context).padding 這個Api來獲取上下左右的安全padding,根據這個padding進行適配，更加靈活性。
接下來具體看一下這兩個方案的使用
使用SafeArea適配
這個使用比較簡單，只要需要將組件進行包裹即可，
<code>home: SafeArea(child: Container( color: Colors.white, child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( color: Colors.lightBlue, child: Text('頭部'), ), Container( color: Colors.redAccent, child: Text('底部'), ) ], ), ))/<code>
使用MediaQuery.of(context).padding適配
<code>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: [ Container( color: Colors.lightBlue, child: Text('頭部'), ), Container( color: Colors.redAccent, child: Text('底部'), ) ], ), ); } }/<code>
以上兩種方案運行效果如下圖，可以看到頭部和底部已經正常顯示了。
上面這兩種方案適用於IOS和Android兩個平臺，對於Android平臺的適配在[ReactNative全面屏(Android)適配問題](ReactNative全面屏(Android)適配問題_wayne214的博客-CSDN博客)也提到了另外的一種方案，看大家的實際需要，來採取合適的適配方案。
查看一下SafeArea這個Widget組件的源碼，可以看到其實內部也是採用了上面提到的第二種方案，相當於SafeArea對第二種方案的封裝，開發中使用起來更方便一下，源碼如下
<code>@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 ? 請稍後... : 0.0, minimum.top - 這個網站可出售。 - 最佳的minimum 來源和相關信息。), 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, ), ); }/<code>
截圖可能看起來更方便，注意看紅框部分
關於Flutter的全面屏適配先分享這些。
歡迎關注我的公眾號：君偉說。分享移動開發技術，職場生活和工作中的酸甜苦辣。