Flutter：消除无标题SliverAppBar下方空白，使SliverList上移贴合

当SliverAppBar不设置标题时，默认会保留工具栏高度（kToolbarHeight），导致下方出现不必要的空白区域。要让SliverList紧贴SliverAppBar，从状态栏下方开始展示内容，可通过调整SliverAppBar的核心参数实现。

修改后的完整代码 #

class SliverPinnedExample extends StatelessWidget {
  final List<String> items = List.generate(30, (i) => 'Item #$i');

  @override
  Widget build(BuildContext context) {
    final statusBarHeight = MediaQuery.of(context).padding.top;

    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            primary: true,
            backgroundColor: Colors.transparent,
            elevation: 0,
            toolbarHeight: 0, // 移除默认工具栏高度
            minHeight: statusBarHeight, // 设置固定高度为状态栏高度
            automaticallyImplyLeading: false, // 禁止自动生成返回按钮
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed: () {
                    // 返回逻辑
                  },
                ),
                IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () {
                    // 搜索逻辑
                  },
                ),
              ],
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  height: 60,
                  alignment: Alignment.centerLeft,
                  margin: EdgeInsets.symmetric(horizontal: 16),
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(color: Colors.grey.shade300),
                    ),
                  ),
                  child: Text(
                    items[index],
                    style: TextStyle(fontSize: 18),
                  ),
                );
              },
              childCount: items.length,
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• toolbarHeight: 0：移除SliverAppBar默认的工具栏高度（默认值为56），直接消除无标题时的多余空白
• minHeight: statusBarHeight：将固定状态下的AppBar高度设为当前设备的状态栏高度，确保仅占据状态栏下方的必要空间
• automaticallyImplyLeading: false：关闭自动生成返回按钮的逻辑，避免与自定义的导航按钮重复
• 通过title字段的Row布局放置导航按钮，确保按钮在状态栏高度范围内正常显示，同时保持整体布局简洁

备选方案（不推荐） #

如果不想调整AppBar结构，可通过给SliverList添加负顶部内边距临时消除空白，但该方法属于hack式写法，适配性较差：

SliverPadding(
  padding: EdgeInsets.only(top: -kToolbarHeight),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      // 原列表构建逻辑
    ),
  ),
)

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