《Flutter 控件大全》第七十八:SafeArea
程序员文章站
2022-03-11 10:57:04
...
- 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
- 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
- Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
现如今的手机已经不能提供给应用程序规整的矩形界面了,一些带圆角或者是刘海屏让应用程序的布局更加复杂,甚至是需要单独适配,这对开发者来来太糟糕了。
因此SafeArea控件应用而生,SafeArea通过MediaQuery
检测屏幕的尺寸使应用程序的大小与屏幕适配。
创建一个铺满全屏的ListView,并显示数据,代码如下:
ListView(
children: List.generate(100, (i) => Text('老孟,一个有态度的程序员')),
)
效果如图:
底部的数据明显被遮挡了,想要解决这个问题只需将ListView包裹在SafeArea中即可,代码如下:
SafeArea(
child: ListView(
children: List.generate(100, (i) => Text('老孟,一个有态度的程序员')),
),
)
效果如图:
我们甚至可以指定显示区域,默认情况下上下左右都是指定区域,如下代码去掉左侧区域:
SafeArea(
left: false,
child: ListView(),
)
推荐阅读
-
《Flutter 控件大全》第四十六个:Flexible、Expanded、Spacer
-
《Flutter 控件大全》第六十六个:PageView
-
《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
-
《Flutter 控件大全》第三十三个:DecoratedBoxTransition
-
《Flutter 控件大全》第二十六个:ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio
-
《Flutter 控件大全》第六个:AnimatedBuilder
-
《Flutter 控件大全》第五十三个:Icon
-
《Flutter 控件大全》第五十一个:GridView
-
《Flutter 控件大全》第三十九个:DraggableScrollableSheet
-
《Flutter 控件大全》第五十个:GridPaper