美文网首页flutterAndroid前端开发那些事儿
Flutter解决神奇的ListView顶部多一段空白高度的问题

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

作者: dengyin2000 | 来源:发表于2021-04-16 15:08 被阅读0次

    最近在已有的项目中使用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顶部多一段空白高度的问题

        本文链接:https://www.haomeiwen.com/subject/upselltx.html