Flutter实现滚动时图片标题收缩置顶、上滑恢复的方案咨询

针对你提到的SliverAppBar无法适配大尺寸初始内容的问题，推荐用CustomScrollView搭配自定义SliverPersistentHeaderDelegate来实现，完全可控滚动动画细节，步骤如下：

1. 自定义PersistentHeaderDelegate #

这个类是核心，负责控制头部的伸缩逻辑和动画变化：

class CollapsingHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double maxHeight;
  final double minHeight;
  final String title;
  final String subtitle;
  final String imageUrl;

  CollapsingHeaderDelegate({
    required this.maxHeight,
    required this.minHeight,
    required this.title,
    required this.subtitle,
    required this.imageUrl,
  });

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // 计算收缩比例：0为完全展开，1为完全收缩
    final progress = shrinkOffset / (maxHeight - minHeight);
    final clampedProgress = progress.clamp(0.0, 1.0);

    return Container(
      color: Colors.white,
      child: Stack(
        fit: StackFit.expand,
        children: [
          // 背景图片：随收缩比例缩放并调整位置
          Positioned(
            top: -clampedProgress * (maxHeight - minHeight) / 2,
            left: 0,
            right: 0,
            height: maxHeight,
            child: Opacity(
              opacity: 1 - clampedProgress * 0.8, // 收缩时逐渐变透明
              child: Image.network(
                imageUrl,
                fit: BoxFit.cover,
              ),
            ),
          ),
          // 标题和副标题容器：随收缩上移并调整大小
          Positioned(
            bottom: minHeight / 2 - clampedProgress * (maxHeight / 2 - minHeight / 2),
            left: 16,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: TextStyle(
                    fontSize: 28 - clampedProgress * 10, // 收缩时字体缩小
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    shadows: [
                      Shadow(blurRadius: 4, color: Colors.black.withOpacity(0.5))
                    ],
                  ),
                ),
                // 副标题：收缩到一定程度隐藏
                Opacity(
                  opacity: 1 - clampedProgress * 2,
                  child: Text(
                    subtitle,
                    style: TextStyle(
                      fontSize: 16 - clampedProgress * 4,
                      color: Colors.white70,
                    ),
                  ),
                ),
              ],
            ),
          ),
          // 顶部状态栏背景（可选）：收缩时显示
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            height: MediaQuery.of(context).padding.top,
            child: Opacity(
              opacity: clampedProgress,
              child: Container(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  @override
  double get maxExtent => maxHeight;

  @override
  double get minExtent => minHeight;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

2. 整合到页面中 #

用CustomScrollView把自定义头部和滚动内容结合：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPersistentHeader(
            pinned: true, // 固定在顶部
            delegate: CollapsingHeaderDelegate(
              maxHeight: 300, // 初始展开高度
              minHeight: 60, // 收缩后的高度
              title: "示例标题",
              subtitle: "这是副标题内容",
              imageUrl: "https://picsum.photos/800/600",
            ),
          ),
          // 滚动内容列表
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text("列表项 $index"),
              ),
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

3. 动画细节调整 #

你可以根据需求修改这些参数：

• maxHeight/minHeight：自定义初始和收缩后的高度
• 图片的opacity和位置逻辑：调整收缩时的透明度与位移
• 标题的字体大小变化：修改fontSize的计算式
• 副标题的隐藏时机：调整opacity的计算比例

这种方案完全避开SliverAppBar的限制，所有动画细节都可以自定义，适配大尺寸初始内容的场景。

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