如何在Flutter中实现类似Hamilton Flutter应用的自定义AppBar？

嘿，你的思路完全没问题！这种用Stack嵌套背景图和可滚动列表的方式，正是实现类似Hamilton那种沉浸式、随滚动变化的自定义AppBar的核心思路。我来帮你把这个思路落地成具体的代码，还会补充一些关键细节，让效果更贴近目标：

1. 基础结构搭建：Scaffold + Stack #

首先用不带默认AppBar的Scaffold，通过Stack分层放置背景图、可滚动内容和自定义AppBar。这里要注意开启extendBodyBehindAppBar，让内容能延伸到状态栏下方，更贴合沉浸式效果：

Scaffold(
  extendBodyBehindAppBar: true,
  body: Stack(
    children: [
      // 1. 背景图层（底层）
      Positioned.fill(
        child: Image.network(
          '你的背景图地址',
          fit: BoxFit.cover,
        ),
      ),
      // 2. 可滚动内容层（中间层）
      ListView(
        controller: _scrollController, // 后面用来监听滚动
        padding: EdgeInsets.only(top: 80 + MediaQuery.of(context).padding.top), // 给自定义AppBar留空间
        children: [
          // 替换成你的实际列表项
          for (int i = 0; i < 20; i++)
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Text('列表项 $i'),
                ),
              ),
            ),
        ],
      ),
      // 3. 自定义AppBar层（顶层悬浮）
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: _buildCustomAppBar(),
      ),
    ],
  ),
);

2. 实现滚动时的动态效果 #

Hamilton的AppBar核心特点是滚动时从透明渐变到实色，标题逐渐显示，这需要我们监听滚动偏移，动态修改AppBar的样式：

第一步：添加滚动控制器 #

在State类中定义控制器和透明度变量，监听滚动事件：

final ScrollController _scrollController = ScrollController();
double _appBarOpacity = 0.0;

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    // 计算滚动偏移对应的透明度（假设滚动200px时完全不透明）
    final scrollOffset = _scrollController.offset;
    _appBarOpacity = scrollOffset / 200;
    // 限制透明度在0-1区间
    _appBarOpacity = _appBarOpacity.clamp(0.0, 1.0);
    setState(() {});
  });
}

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

第二步：构建动态变化的自定义AppBar #

写一个方法返回自定义AppBar，根据_appBarOpacity调整背景色、标题透明度：

Widget _buildCustomAppBar() {
  final statusBarHeight = MediaQuery.of(context).padding.top;
  return Container(
    padding: EdgeInsets.only(top: statusBarHeight, left: 16, right: 16),
    height: 80 + statusBarHeight, // 包含状态栏高度
    color: Colors.black.withOpacity(_appBarOpacity),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
        Opacity(
          opacity: _appBarOpacity,
          child: const Text(
            'Hamilton',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        IconButton(
          icon: const Icon(Icons.more_vert, color: Colors.white),
          onPressed: () {},
        ),
      ],
    ),
  );
}

3. 进阶优化细节 #

• 背景图模糊效果：如果想让滚动时背景图逐渐模糊，可以在背景图层添加BackdropFilter：

  Positioned.fill(
    child: Stack(
      children: [
        Image.network('你的背景图地址', fit: BoxFit.cover),
        if (_appBarOpacity > 0)
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5 * _appBarOpacity, sigmaY: 5 * _appBarOpacity),
            child: Container(color: Colors.black.withOpacity(0.2 * _appBarOpacity)),
          ),
      ],
    ),
  );
  

• 状态栏图标颜色：可以根据_appBarOpacity动态修改状态栏图标颜色，比如用SystemChrome.setSystemUIOverlayStyle在滚动监听里更新。

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