如何在Flutter中实现iOS设置式大标题滚动折叠AppBar？

在Flutter里实现iOS设置/闹钟App那种滚动时大标题隐藏、顶部显示居中小标题的效果，最直接的方案是用原生的SliverAppBar组件，无需额外插件就能搞定，以下是具体实现方法：

一、原生Widget实现（推荐） #

SliverAppBar天生支持滚动联动效果，通过配置几个关键属性即可实现需求：

• pinned: true：确保AppBar始终固定在顶部，滚动时不会消失
• expandedHeight：设置展开状态下大标题区域的高度
• flexibleSpace：承载展开状态的大标题，定义滚动时的过渡动画
• title：设置收缩后显示的小标题，配合centerTitle: true实现居中

完整代码示例 #

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: [
            SliverAppBar(
              pinned: true,
              expandedHeight: 200.0,
              centerTitle: true,
              // 收缩后显示的小标题
              title: const Text('设置', style: TextStyle(fontSize: 18)),
              flexibleSpace: FlexibleSpaceBar(
                // 展开状态的大标题，通过Align调整位置
                background: Align(
                  alignment: const Alignment(0, 0.6),
                  child: const Text(
                    '设置',
                    style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
            // 模拟长列表内容
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('选项 ${index + 1}'),
                ),
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

效果说明 #

滚动列表时，FlexibleSpaceBar中的大标题会逐渐向上隐藏，顶部的小标题同步显示；当滚动到顶部时，大标题完全隐藏在AppBar后方，仅显示居中的小标题，和iOS原生App的效果完全一致。

如果需要更精细的定制（比如调整动画曲线、标题透明度变化），可以自定义FlexibleSpaceBar的collapseMode属性，或者实现SliverPersistentHeaderDelegate来完全掌控AppBar的展开/收缩状态。

二、插件辅助实现（复杂定制场景） #

如果原生组件的默认效果无法满足你的定制需求，可以使用第三方插件：

• flutter_collapsible_appbar：提供更多自定义选项，比如自定义展开/收缩的动画曲线、标题大小变化逻辑
• scroll_app_bar：支持更灵活的滚动联动配置，可根据滚动位置触发不同UI变化

使用插件时，只需按照插件文档配置对应属性即可，核心逻辑依然基于滚动监听和AppBar状态切换。

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