Flutter实现默认隐藏AppBar、向下滚动时显示的功能

要实现页面加载时默认隐藏AppBar、仅在用户向下滚动时显示的效果，这里提供两种可行的解决方案：

方案一：基于ScrollController+动画组件（推荐，更灵活） #

这种方式通过监听滚动偏移，结合动画组件实现平滑的AppBar显示/隐藏过渡，逻辑更易自定义：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Account extends ConsumerStatefulWidget {
  const Account({super.key});

  @override
  ConsumerState<Account> createState() => _AccountState();
}

class _AccountState extends ConsumerState<Account> {
  late ScrollController _scrollController;
  bool _isAppBarVisible = false;
  final double _appBarHeight = kToolbarHeight;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    // 初始状态隐藏AppBar
    _isAppBarVisible = false;
    // 绑定滚动监听
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    // 滚动偏移超过50时显示AppBar，回到顶部附近时隐藏
    // 阈值可根据需求自行调整
    if (_scrollController.offset > 50 && !_isAppBarVisible) {
      setState(() => _isAppBarVisible = true);
    } else if (_scrollController.offset <= 20 && _isAppBarVisible) {
      setState(() => _isAppBarVisible = false);
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Stack(
        children: [
          // 列表内容，根据AppBar状态调整顶部内边距
          ListView.builder(
            controller: _scrollController,
            padding: EdgeInsets.only(top: _isAppBarVisible ? _appBarHeight : 0),
            itemCount: 100,
            itemBuilder: (context, index) => ListTile(title: Text('Item #$index')),
          ),
          // 带动画的AppBar
          AnimatedPositioned(
            duration: const Duration(milliseconds: 300),
            top: _isAppBarVisible ? 0 : -_appBarHeight,
            left: 0,
            right: 0,
            child: AppBar(
              title: const Text('Account'),
              elevation: 4,
            ),
          ),
        ],
      ),
    );
  }
}

方案二：基于CustomScrollView+SliverAppBar #

如果偏好使用Sliver组件体系，可以通过设置初始滚动偏移让AppBar默认隐藏：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Account extends ConsumerStatefulWidget {
  const Account({super.key});

  @override
  ConsumerState<Account> createState() => _AccountState();
}

class _AccountState extends ConsumerState<Account> {
  late ScrollController _scrollController;
  final double _appBarHeight = kToolbarHeight;

  @override
  void initState() {
    super.initState();
    // 初始滚动偏移设为AppBar高度，让它默认被滚出屏幕
    _scrollController = ScrollController(initialScrollOffset: _appBarHeight);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            floating: true,
            title: const Text('Account'),
            // 固定AppBar高度，避免展开/折叠的额外逻辑
            expandedHeight: _appBarHeight,
            collapsedHeight: _appBarHeight,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}

注意事项 #

• 方案一中的滚动阈值（50、20）可以根据你的交互需求调整，让AppBar的显示时机更符合预期
• 方案二中如果需要自动隐藏AppBar，可以在_onScroll监听里添加逻辑，当滚动回到顶部时重置滚动偏移

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