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

Question

我在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,
            );
          },
        ),
      ),
    );
  }
}

Answer 1

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

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