如何让Flutter的AppBar不固定在顶部，滚动时可滑出视野

当然可以实现这个需求！默认的AppBar是固定在顶部的，但Flutter提供了SliverAppBar组件，搭配CustomScrollView就能轻松让AppBar随页面滚动滑出视野。

核心思路 #

用SliverAppBar替代普通AppBar，将它放入CustomScrollView的slivers列表中，通过配置SliverAppBar的属性来控制滚动时的行为。关键属性包括：

• pinned: false：设置为false时，AppBar会完全滑出屏幕，而不是保持一部分在顶部
• floating: true（可选）：开启后，只要向下滚动一点点，AppBar就会快速回到视野中
• expandedHeight：设置AppBar展开时的高度（可以搭配flexibleSpace添加背景图或自定义内容）

完整代码示例 #

替换你原来的Scaffold代码，改成下面这样：

return Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverAppBar(
        title: const Text("可滚动的AppBar"),
        // 关键：设置为false，让AppBar完全滑出屏幕
        pinned: false,
        // 可选：开启后向下滚动快速显示AppBar
        floating: true,
        // 可选：设置展开高度，搭配flexibleSpace做扩展效果
        expandedHeight: 150,
        flexibleSpace: FlexibleSpaceBar(
          background: Image.network(
            "https://example.com/your-image.jpg",
            fit: BoxFit.cover,
          ),
        ),
      ),
      // 这里放你的长列表内容，比如SliverList
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return ListTile(
              title: Text("列表项 $index"),
            );
          },
          childCount: 100, // 模拟长列表
        ),
      ),
    ],
  ),
);

如果你的页面已经用了ListView怎么办？ #

如果不想重构整个页面为CustomScrollView，可以用NestedScrollView来整合：

return Scaffold(
  body: NestedScrollView(
    headerSliverBuilder: (context, innerBoxIsScrolled) {
      return [
        SliverAppBar(
          title: const Text("嵌套滚动的AppBar"),
          pinned: false,
          floating: true,
        ),
      ];
    },
    body: ListView.builder(
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(title: Text("列表项 $index"));
      },
    ),
  ),
);

这样设置后，当你向下滚动长列表时，AppBar就会平滑滑出屏幕；向上滚动时，它又会重新出现，完全符合你的需求~

内容的提问来源于stack exchange，提问作者S.D.