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