如何在Flutter中实现AppBar区域Container的动态高度调整？

完全可行，你遇到的UI不更新问题大概率是因为没有在滚动监听中触发UI重建，或者动态高度没有正确绑定到Container的属性上。下面是具体的实现思路和代码示例：

核心思路 #

通过ScrollController监听CustomScrollView的滚动偏移量，根据偏移值计算出Container的目标高度，再通过setState()触发UI更新，让Container的高度随滚动实时变化。同时可以结合SliverAppBar的expandedHeight和折叠特性，让高度变化更贴合需求。

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<DynamicHeightAppBar> createState() => _DynamicHeightAppBarState();
}

class _DynamicHeightAppBarState extends State<DynamicHeightAppBar> {
  final ScrollController _scrollController = ScrollController();
  // 容器的最大/最小高度，可根据需求调整
  double _containerHeight = 120;
  final double _maxHeight = 120;
  final double _minHeight = 40;
  // SliverAppBar的展开高度
  final double _appBarExpandedHeight = 200;

  @override
  void initState() {
    super.initState();
    // 监听滚动事件
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    // 计算滚动偏移比例：从0到1（完全展开到完全折叠）
    final scrollRatio = _scrollController.offset / _appBarExpandedHeight;
    // 根据比例计算容器高度，限制在最大/最小值之间
    final newHeight = _maxHeight - (_maxHeight - _minHeight) * scrollRatio.clamp(0, 1);
    
    // 只有当高度变化时才触发更新，避免不必要的重绘
    if (newHeight != _containerHeight) {
      setState(() {
        _containerHeight = newHeight;
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverAppBar(
            expandedHeight: _appBarExpandedHeight,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: Stack(
                fit: StackFit.expand,
                children: [
                  // 背景层（可选）
                  Container(color: Colors.blueAccent),
                  // 动态高度的容器
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Container(
                      height: _containerHeight,
                      color: Colors.white.withOpacity(0.8),
                      alignment: Alignment.center,
                      child: const Text("动态高度容器"),
                    ),
                  ),
                ],
              ),
            ),
          ),
          // 滚动内容
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text("列表项 $index")),
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

关键注意点 #

1. 触发UI更新：必须在滚动监听中调用setState()，否则即使计算出了新高度，UI也不会刷新。
2. 限制高度范围：用clamp(0,1)确保滚动比例不会超出0到1的范围，避免容器高度出现负数或超过最大值。
3. 优化重绘：只有当高度实际变化时才调用setState()，减少不必要的UI重建。
4. 位置控制：如果把Container放在Stack里，建议用Positioned固定位置（比如底部），避免滚动时容器位置混乱。

如果你需要更贴合参考效果的动画，可以在计算高度的同时，添加文本、图标的透明度或位置变化，同样通过setState()更新即可。

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