Flutter开发：解决ListView顶部有留白的方法

已于 2022-09-06 17:38:14 修改
阅读量1w 收藏 1
点赞数 2
分类专栏： Flutter开发 文章标签： flutter android java
于 2022-02-12 21:14:41 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/CC1991_/article/details/122902093
版权
Flutter开发 专栏收录该内容
22 篇文章 3 订阅 ¥199.90 ¥299.90
订阅专栏
本文介绍了在Flutter开发中ListView顶部出现留白的问题及其解决方法。通过使用MediaQuery.removePadding包裹ListView并移除padding，可以有效地解决这个问题。详细步骤和示例代码在文中提供。
摘要由CSDN通过智能技术生成

前言

在Flutter开发中，开发者对于ListView组件的使用并不陌生，因为常规的业务需求基本必会涉及到列表或者滑动，这就必会使用ListView。关于ListView的常规使用，一般查看官方文档都能找到对应的API，这里就不再多少。但是对于一些不常用的使用还是要知道的，那么本篇博文就来分享一下关于解决ListView的使用中常见问题之一：ListView顶部留白问题，方便查阅使用。

描述

在Flutter中ListView顶部默认状态下会有空白问题，会看到ListView头部有一点空白区域，那是因为当ListView没有和AppBar一起使用时，头部会有一个padding，那么想要去掉这个padding，就要使用MediaQuery.removePadding 把ListView包裹一下，也就是需要将ListView作为MediaQuery.removeP

了解本专栏 订阅专栏 解锁全文
三掌柜666
关注
专栏目录
订阅专栏
Flutter解决ListView顶部留白
一花一世界 一叶一菩提
08-16 1124
Flutter解决ListView顶部留白
flutter中使用listview在顶部出现空白区域的解决方法
qq_45317844的博客
12-21 1831
MediaQuery.removePadding的使用参考：https://www.helloworld.net/p/5659699907。在图片中可以看出阴影的起始线和图片的顶部并不在一起，这就是listview留下的空白区域，所用到的代码如下。listview组件会在listview的区域顶部出现一个空白区域，如下。可以看到当下拉出现阴影时，阴影的起始线与图片顶部相对齐，组件可以解决这一问题，
Flutter中ListView顶部有空白
HuberCui的博客
06-02 2696
ListView头部有一段空白区域，是因为当ListView没有和AppBar一起使用时，头部会有一个padding，为了去掉padding，可以使用MediaQuery.removePadding 包裹这个ListView MediaQuery.removePadding(context: context,removeTop: true, child: _buildListView('aaa')) 如下图对比 ...
flutter 去除listview上下留白
qq_42772570的博客
12-19 927
在listview外层加入MediaQuery.removePadding，以及需要去除的位置 MediaQuery.removePadding( context: context, removeTop: true, removeBottom: true, child: ListView.builder( itemBuilder: (context, index) => Container( color: Colors.blue, padding: Ed
flutter Listview使用教程，点击事件，ListView顶部留有空白（第一行大小不一样）解决办法
键盘的起始页
05-25 1708
flutter Listview使用教程，点击事件，ListView顶部留有空白（第一行大小不一样）解决办法。直接copy下面的代码自己跑一下就知道了。基础代码在这里：https://codelabs.flutter-io.cn/codelabs/first-flutter-app-pt1-cn/index.html#5 上面的基础代码存在问题，顶部（第一行大小不一样） ，解决办法为： return new Divider( height: 0, ...
Flutter入门：教程4 ListView
04-08
ListView有两种主要类型：ListView.builder和ListView.separated。ListView.builder更高效，因为它根据需要只创建可见的子项，而ListView.separated则在子项之间插入分离器。 1. **ListView.builder** 使用...
flutter 在使用listView的时候顶部出现空白
wxx314165038的博客
04-20 1256
在开发flutter中使用listview的时候，页面取消顶部tabbar的时候Listview出现顶部空白，造成这个的原因就是取消了顶部tabbar 解决办法在listview的外面加下面的Widget MediaQuery.removePadding 这里是我的写法： MediaQuery.removePadding( removeTop:true, context:context, ...
Flutter-ListView顶部留白
摩羯座程序媛的专栏
11-06 751
想要去掉这个padding，在外层使用MediaQuery.removePadding即可。后来发现，listview不和appbar一起使用时，会有一个默认的padding。在没有设置padding的情况下，上下都有留白。ListView解决底部或顶部留白问题。
listview 头部标题置顶固定 能够上拉刷新和下拉加载
06-04
listview配合pulltorefresh能够进行上拉刷新和下拉加载，并且实现头部标题固定，拖动列表标题会更换
Flutter ListView 解决IOS底部或顶部留白问题
believeinbelieve的博客
03-01 2447
Flutter 中的ListView 顶部或者底部 ios出现空白区域
flutter ListView在苹果手机顶部出现空白间距的解决方案
zoulutaisao的博客
09-06 1673
flutter ListView在苹果手机顶部出现空白间距的解决方案。
flutter 如何去掉listview顶部空白的问题
weixin_44911775的博客
06-10 783
参考 解决listview顶部空白问题。用MediaQuery.removePadding包裹住。设置removeTop:true。MediaQuery.removePadding(removeTop:true,context:context,)
Flutter 聊天界面使用ListView的reverse:true，导致条目太少的时候会从下往上显示，导致顶部大片空白
qq_35364808的博客
12-24 4013
这个问题其实很简单，但是看到网上都没有正确的解决方案，所以就献丑了 这个问题主要是因为布局的原因，正常情况下时候ListView的reverse:true，就算条目太少也是从上往下显示的。出现这个原因主要是因为，聊天窗口大家都是使用Column嵌套ListView，ListView负责消息列表，然后还要有输入框之类的，所以不能让ListView占满怎么屏幕所以需要使用Expanded包裹ListView，他会把ListView在条目过少的时候照样将他的宽度拉到可适应的最大，这个是导致布局异常的原因。想
Flutter基础之ListView的基本使用
最新发布
Eqiqi的博客
07-19 1342
Flutter作为史上最强UI框架，拥有很多丰富的UI组件，为仿抖音项目的实战，本文简单介绍一下基础组件使用最多的列表ListView的用法。常用属性如下表所示属性类型概述AxisAxis.horizontal ：水平列表，Axis.vertical：垂直列表padding内边距reversebool组件反向排序childrenList列表元素shrinkWrapbool是否根据item高度来决定总高度。
flutter实现ListView头部悬浮，item多种高度
大灰狼的小绵羊哥哥的博客
10-29 5118
需要封装好的Widget可以看这篇： flutter实现ListView分组头部悬浮，支持混搭多种header、item、separator，支持indexPath跳转 思路： 借住Stack，底层是ScrollView，ScrollView上有多个分组header（以下简称header）。上层是固定位置（悬停）的HoveringHeader。 在ScrollView向上滚动时，当某个header上边缘和HoveringHeader下边缘即将重叠时，HoveringHeader的位置开始随着Scr.
Flutter中解决ListView没配合AppBar使用顶部出现空白间隔
Flutter|Android移动开发
09-16 5587
ListView头部有一段空白区域，是因为当ListView没有和AppBar一起使用时，头部会有一个padding，为了去掉padding，可以使用MediaQuery.removePadding Widget _listView(BuildContext context){ return MediaQuery.removePadding( removeTop: true, ...
Flutter ListView解决底部或顶部留白问题
坚果的博客
10-07 1837
Flutter ListView解决底部或顶部留白问题 在没有设置padding的情况下，上下都有留白 方法一： ListView.builder( padding: EdgeInsets.zero, itemCount: ..., itemBuilder: ..., ); 后来发现，listview不和appbar一起使用时，会有一个默认的padding 想要去掉这个padding，在外层使用MediaQuery.removePadding即可 MediaQ
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三掌柜666

如果对您有所帮助，请支持一下呗

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值