Flutter 中 SliverAppBar 和 ListView 之间的奇怪空间

问题描述

我在Flutter文档的例子中写了一个nestedScrollView接口，但是当我把ListView当做body看的时候，我发现ListView和SliverAppBar之间有一个奇怪的差距。我该怎么做才能消除这个差距

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: nestedScrollView(
        headerSliverBuilder: (context,BoxIsScrolled) {
          return [
            SliverAppBar(
              pinned: true,expandedHeight: 100,flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,background: Container(
                  color: Colors.red,),];
        },body: ListView.builder(
          itemBuilder: (BuildContext context,int index) {
            return Container(
              child: Text(
                "$index",color: Colors.green,);
          },);
  }
}

解决方法

您可以用 Listview 包裹您的 MediaQuery。有一种方法可以删除不需要的空间。您可以查看以下代码。

 MediaQuery.removePadding(
      removeTop: true,context: context,child: ListView.builder(
        itemBuilder: (BuildContext context,int index) {
          return Container(
            child: Text(
              "$index",),color: Colors.green,);
        },)