Flutter解决神奇的ListView顶部多一段空白高度的问题

最近在已有的项目中使用Flutter重构一个已有的简单的页面,在一个普通的安卓原生页面嵌入一个FlutterFragment页面,但是发现安卓原生页面如果做了沉浸式的话(没有沉浸式的话是没问题的),Flutter页面里面的ListView前面总会有一段多出来的空白高度,目测应该是statusbar的高度。如下图:


image.png

包一个SafeArea也不行,还是有空白,但是这个空白不是在ListView里面,通过Flutter Devtools分析布局。


image.png

发现ListView竟然多了一个SliverPadding,25应该刚好就是statusbar的高度,看了下ListView源码也没看出所以然,本着有问题找谷歌的方针,谷歌输入关键字Flutter ListView SliverPadding Top。第一个结果就是要找的。
image.png

解决方案:

Widget _myListView(){
  return MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: ListView.builder(
     .......
    )
  );
}

Reference:https://github.com/flutter/flutter/issues/14842

注:虽然看起来解决起来很快,但是其实至少花了几个小时,包括尝试各种方案,看源码。

你可能感兴趣的:(Flutter解决神奇的ListView顶部多一段空白高度的问题)