Flutter SafeArea - 异形屏适配利器

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

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

1.  `Widget build(BuildContext context)  {`
    
2.   `return  Scaffold(`
    
3.   `appBar:  AppBar(`
    
4.   `title:  Text(widget.title),`
    
5.   `),`
    
6.   `body:  ListView.builder(itemBuilder:  (context, index)  {`
    
7.   `return  SizedBox(`
    
8.   `height:  30,`
    
9.   `child:  Text(`
    
10.   `'Data',`
    
11.   `style:  TextStyle(fontSize:  18),`
    
12.   `),`
    
13.   `);`
    
14.   `}),`
    
15.   `floatingActionButton:  FloatingActionButton(`
    
16.   `onPressed: _incrementCounter,`
    
17.   `tooltip:  'Increment',`
    
18.   `child:  Icon(Icons.add),`
    
19.   `),`
    
20.   `);`
    
21.  `}`

如何解决

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

1.   `Widget build(BuildContext context)  {`
    
2.   `return  Scaffold(`
    
3.   `appBar:  AppBar(`
    
4.   `title:  Text(widget.title),`
    
5.   `),`
    
6.   `body:  SafeArea(  // 加入SafeArea`
    
7.   `child:  ListView.builder(itemBuilder:  (context, index)  {`
    
8.   `return  Padding(`
    
9.   `padding:  EdgeInsets.only(left:  10, bottom:  18),`
    
10.   `child:  Text(`
    
11.   `'Data',`
    
12.   `style:  TextStyle(fontSize:  18),`
    
13.   `),`
    
14.   `);`
    
15.   `}),`
    
16.   `),`
    
17.   `floatingActionButton:  FloatingActionButton(`
    
18.   `onPressed: _incrementCounter,`
    
19.   `tooltip:  'Increment',`
    
20.   `child:  Icon(Icons.add),`
    
21.   `),`
    
22.   `);`
    
23.   `}`

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

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

1.  `SafeArea(`
    
2.   `top:  false,`
    
3.   `bottom:  true,`
    
4.   `left:  true,`
    
5.   `right:  false,`
    
6.  `),`

原理是什么

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

1.   `Widget build(BuildContext context)  {`
    
2.   `assert(debugCheckHasMediaQuery(context));`
    
3.   `// 这里获取到padding`
    
4.   `final  EdgeInsets padding =  MediaQuery.of(context).padding;`
    
5.   `return  Padding(  // 返回了一个 Padding widget`
    
6.   `padding:  EdgeInsets.only(`
    
7.   `left: math.max(left ? padding.left :  0.0, minimum.left),`
    
8.   `top: math.max(top ? padding.top :  0.0, minimum.top),`
    
9.   `right: math.max(right ? padding.right :  0.0, minimum.right),`
    
10.   `bottom: math.max(bottom ? padding.bottom :  0.0, minimum.bottom),`
    
11.   `),`
    
12.   `child:  MediaQuery.removePadding(`
    
13.   `context: context,`
    
14.   `removeLeft: left,`
    
15.   `removeTop: top,`
    
16.   `removeRight: right,`
    
17.   `removeBottom: bottom,`
    
18.   `child: child,`
    
19.   `),`
    
20.   `);`
    
21.   `}`

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

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