如何在Flutter中实现类似WhatsApp的滚动隐藏/反向显示AppBar

嘿，这个滚动时自动隐藏/显示AppBar的需求太常见了，我在项目里正好实现过类似的效果，给你分享两种实用的方案，都是Flutter原生就能搞定的：

方案一：用官方的SliverAppBar（推荐） #

这是最简洁的实现方式，Flutter的SliverAppBar自带了滚动交互的属性，配合CustomScrollView就能轻松复刻WhatsApp的效果，而且系统自带的动画流畅度拉满，不用自己写复杂的逻辑。

核心原理 #

• floating: true：向上滚动（内容向下移动）时AppBar自动隐藏；只要开始向下滚动哪怕一点点，AppBar会立刻滑回显示状态。
• snap: true：配合floating使用，让AppBar的显隐动画更干脆，不会卡在半中间。
• 把长内容放在SliverList里，和SliverAppBar组成滚动视图。

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: const Text('WhatsApp Style'),
              floating: true, // 关键：滚动触发显隐
              snap: true,     // 关键：动画吸附效果
              elevation: 4,
              backgroundColor: Colors.green[700],
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('聊天内容 $index'),
                  subtitle: const Text('这是一条消息预览'),
                  leading: const CircleAvatar(
                    child: Icon(Icons.person),
                  ),
                ),
                childCount: 50, // 模拟长列表
              ),
            ),
          ],
        ),
      ),
    );
  }
}

方案二：自定义滚动监听（灵活可控） #

如果你的布局不想依赖CustomScrollView和Sliver组件，比如用普通的AppBar+ListView，可以通过NotificationListener监听滚动事件，手动控制AppBar的显隐动画，自由度更高。

核心思路 #

1. 监听ScrollNotification，获取滚动位置并判断滚动方向。
2. 用AnimatedContainer给AppBar添加位移动画，控制它从视野内滑出/滑入。
3. 记录上一次的滚动位置，区分向上/向下滚动的动作。

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const ScrollHideAppBarPage(),
    );
  }
}

class ScrollHideAppBarPage extends StatefulWidget {
  const ScrollHideAppBarPage({super.key});

  @override
  State<ScrollHideAppBarPage> createState() => _ScrollHideAppBarPageState();
}

class _ScrollHideAppBarPageState extends State<ScrollHideAppBarPage> {
  // 控制AppBar偏移：0是完全显示，-kToolbarHeight是完全隐藏
  double _appBarOffset = 0;
  // 记录上一次滚动位置，用来判断滚动方向
  double _lastScrollPosition = 0;

  @override
  Widget build(BuildContext context) {
    final toolbarHeight = kToolbarHeight;
    return Scaffold(
      body: Stack(
        children: [
          // 主内容列表
          NotificationListener<ScrollNotification>(
            onNotification: (notification) {
              final currentPosition = notification.metrics.pixels;
              // 向上滚动超过AppBar高度时，隐藏AppBar
              if (currentPosition > _lastScrollPosition && currentPosition > toolbarHeight) {
                setState(() => _appBarOffset = -toolbarHeight);
              }
              // 向下滚动时，显示AppBar
              else if (currentPosition < _lastScrollPosition) {
                setState(() => _appBarOffset = 0);
              }
              _lastScrollPosition = currentPosition;
              return true;
            },
            child: ListView.builder(
              padding: EdgeInsets.only(top: toolbarHeight), // 给AppBar预留位置
              itemCount: 50,
              itemBuilder: (context, index) => ListTile(
                title: Text('聊天内容 $index'),
                subtitle: const Text('这是一条消息预览'),
                leading: const CircleAvatar(child: Icon(Icons.person)),
              ),
            ),
          ),
          // 带动画的AppBar
          AnimatedContainer(
            duration: const Duration(milliseconds: 200), // 可调整动画快慢
            transform: Matrix4.translationValues(0, _appBarOffset, 0),
            child: AppBar(
              title: const Text('自定义滚动监听'),
              backgroundColor: Colors.green[700],
              elevation: 4,
            ),
          ),
        ],
      ),
    );
  }
}

一些优化小技巧 #

• 方案一中，如果想要AppBar先收缩再隐藏，可以加上expandedHeight和flexibleSpace属性，实现类似朋友圈顶部的折叠效果。
• 方案二中，建议添加滚动阈值，避免手指轻微滑动就触发动画，提升体验：

  // 滚动超过10px才触发动作
  if (currentPosition - _lastScrollPosition > 10) {
    setState(() => _appBarOffset = -toolbarHeight);
  } else if (_lastScrollPosition - currentPosition > 10) {
    setState(() => _appBarOffset = 0);
  }
  

• 两种方案都可以根据需求调整动画时长、颜色、阴影等细节，完全适配你的App风格。

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