Flutter SafeArea - 异形屏适配利器
Flutter SafeArea - 异形屏适配利器
Flutter笔记
发布于 2019-07-25 06:25:52
发布于 2019-07-25 06:25:52
代码可运行
运行总次数：0
代码可运行
相信关注这个公众号的人已经了解过 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 来包裹住我们编写的页面。这样我们的页面就不会被异形屏幕给遮挡住了。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-05-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
Flutter开发实战分析-pesto_demo解析
更多 >
腾讯云开发者
