前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter Widgets 之 SafeArea

Flutter Widgets 之 SafeArea

作者头像
老孟Flutter
发布2020-09-11 16:10:08
6440
发布2020-09-11 16:10:08
举报
文章被收录于专栏:FlutterFlutter

一个

有态度

的程序员

现如今的手机已经不能提供给应用程序规整的矩形界面了,一些带圆角或者是刘海屏让应用程序的布局更加复杂,甚至是需要单独适配,这对开发者来来太糟糕了。

因此SafeArea控件应用而生,SafeArea通过`MediaQuery`检测屏幕的尺寸使应用程序的大小与屏幕适配。

创建一个铺满全屏的ListView,并显示数据,代码如下:

代码语言:javascript
复制
ListView(
      children: List.generate(100, (i) => Text('老孟,一个有态度的程序员')),
    )

效果如图:

底部的数据明显被遮挡了,想要解决这个问题只需将ListView包裹在SafeArea中即可,代码如下:

代码语言:javascript
复制
SafeArea(
      child: ListView(
        children: List.generate(100, (i) => Text('老孟,一个有态度的程序员')),
      ),
    )

效果如图:

我们甚至可以指定显示区域,默认情况下上下左右都是指定区域,如下代码去掉左侧区域:

代码语言:javascript
复制
SafeArea(
  left: false,
    child: ListView(),
)
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-02-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 老孟Flutter 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档