Flutter 中 SliverAppBar 和 ListView 之间的奇怪 space

Question

我在Flutter文档的例子中写了一个NestedScrollView接口，但是当我以ListView为主体的时候，发现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

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

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

Flutter 中 SliverAppBar 和 ListView 之间的奇怪 space

Weird space between SliverAppBar and ListView in flutter

listview

nestedscrollview

flutter

sliverappbar