Flutter中如何去除SliverAppBar顶部的内边距？

你遇到的顶部内边距，是因为SliverAppBar默认开启了primary: true属性，该属性会自动适配系统状态栏高度并添加顶部内边距。同时默认的title布局也自带间距，只需调整两个关键属性就能解决：

修改方法 #

在你的SliverAppBar中添加以下属性：

• primary: false：关闭状态栏自动适配，移除顶部的状态栏内边距
• titleSpacing: 0：消除title区域默认的左右及顶部间距（按需添加）

修改后的完整代码 #

Scaffold(
  backgroundColor: Colors.green.shade200,
  appBar: null,
  body: CustomScrollView(
    slivers: <Widget>[
      SliverToBoxAdapter(
        child: Container(
          height: 200,
          color: Colors.transparent,
          child: Center(
            child: Text("SliverToBoxAdapter"),
          ),
        ),
      ),
      SliverAppBar(
        pinned: true,
        snap: false,
        floating: false,
        backgroundColor: Colors.white,
        primary: false, // 关键：移除状态栏适配的内边距
        titleSpacing: 0, // 可选：消除title默认间距
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20))
        ),
        leadingWidth: 100,
        title: Text("title", style: TextStyle(color: Colors.blueAccent),),
      ),
      SliverGrid(
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 200.0,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 4.0,
        ),
        delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.teal[100 * (index % 9)],
              child: Text('Grid Item $index'),
            );
          },
          childCount: 100,
        ),
      ),
    ],
  ),
)

补充说明 #

如果调整后仍有细微间距，可以手动设置toolbarHeight属性（比如toolbarHeight: kToolbarHeight为默认高度，或设置更小数值），进一步压缩顶部空间。

内容的提问来源于stack exchange，提问作者zhongpeng