现有手机可能会出现的问题
现在的手机已经不是方方正正的屏幕了,所以我们在写一些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 来包裹住我们编写的页面。这样我们的页面就不会被异形屏幕给遮挡住了。
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦