如何在Flutter中结合CustomScrollView与Slivers实现堆叠重叠卡片UI效果？

嘿，我完全懂你想要的这种堆叠卡片效果！之前用Stack确实会卡在动态内容适配和Sliver兼容的问题上，刚好有两个实用的方案能完美解决你的需求，咱们一步步来看：

方案一：用SliverPersistentHeader实现可滚动折叠的堆叠卡片 #

这个方案刚好匹配你说的「滚动时把这些部分收起来」的需求，SliverPersistentHeader本身就是为滚动时的组件状态控制设计的，能完美融入CustomScrollView的Sliver体系里。我们可以自定义一个Delegate，在里面处理堆叠卡片的布局，还能根据滚动偏移动态调整卡片的位置。

代码示例 #

首先自定义一个SliverPersistentHeaderDelegate：

class OverlappedCardsHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double maxExtent;
  final double minExtent;

  OverlappedCardsHeaderDelegate({required this.maxExtent, required this.minExtent});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // 计算滚动收缩的比例，用来动态调整顶部卡片的位置
    final shrinkRatio = shrinkOffset / (maxExtent - minExtent);
    final topCardOffset = 160 * (1 - shrinkRatio); // 滚动时让顶部卡片逐渐上移收起

    return Stack(
      clipBehavior: Clip.none,
      children: [
        // 底部卡片：支持任意动态内容，这里用Column包裹示例内容
        Positioned.fill(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24),
              color: Colors.green,
            ),
            child: const Padding(
              padding: EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("底部动态内容", style: TextStyle(fontSize: 20, color: Colors.white)),
                  SizedBox(height: 20),
                  Text("动态内容行1"),
                  Text("动态内容行2"),
                  Text("动态内容行3"),
                ],
              ),
            ),
          ),
        ),
        // 顶部卡片：根据滚动偏移调整位置，内容同样支持动态扩展
        Positioned(
          left: 0,
          right: 0,
          top: topCardOffset,
          child: Container(
            constraints: const BoxConstraints(minHeight: 200),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24),
              color: Colors.black,
            ),
            child: const Padding(
              padding: EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("顶部动态内容", style: TextStyle(fontSize: 20, color: Colors.white)),
                  SizedBox(height: 20),
                  Text("这里可以放任意动态内容"),
                  SizedBox(height: 100), // 模拟更多内容
                  Text("底部的内容会被顶部卡片覆盖"),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return maxExtent != oldDelegate.maxExtent || minExtent != oldDelegate.minExtent;
  }
}

然后在CustomScrollView中使用这个Delegate：

CustomScrollView(
  slivers: [
    SliverPersistentHeader(
      pinned: true, // 设为true时，头部会固定在顶部并逐渐收缩
      delegate: OverlappedCardsHeaderDelegate(
        maxExtent: 460, // 最大展开高度，根据你的内容调整
        minExtent: 200, // 滚动到最小状态时的高度
      ),
    ),
    // 下面可以添加任意Sliver组件，比如SliverList
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(
          title: Text("列表项 $index"),
        ),
        childCount: 20,
      ),
    ),
  ],
)

这个方案的好处是完美适配CustomScrollView，滚动时的折叠效果完全可控，而且卡片内容可以是任意动态组件，高度会自动适应。

方案二：用SliverToBoxAdapter适配动态高度的静态堆叠卡片 #

如果你不需要滚动折叠的效果，只是想在CustomScrollView里放一组高度自适应的堆叠卡片，这个方案更简单。我们用GlobalKey来获取底部卡片的实际高度，动态计算顶部卡片的偏移位置，完美解决动态内容的适配问题。

代码示例 #

先自定义一个动态堆叠卡片组件：

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

  @override
  State<DynamicOverlappedCards> createState() => _DynamicOverlappedCardsState();
}

class _DynamicOverlappedCardsState extends State<DynamicOverlappedCards> {
  final GlobalKey _bottomCardKey = GlobalKey();
  double _bottomCardHeight = 0;

  @override
  void initState() {
    super.initState();
    // 等布局完成后，获取底部卡片的实际高度
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final renderBox = _bottomCardKey.currentContext?.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        setState(() {
          _bottomCardHeight = renderBox.size.height;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        // 底部卡片：用GlobalKey标记，用来获取实际高度
        Container(
          key: _bottomCardKey,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24),
            color: Colors.green,
          ),
          child: const Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("底部动态内容", style: TextStyle(fontSize: 20, color: Colors.white)),
                SizedBox(height: 20),
                Text("动态内容行1"),
                Text("动态内容行2"),
                Text("动态内容行3"),
                Text("动态内容行4"),
              ],
            ),
          ),
        ),
        // 顶部卡片：根据底部卡片的高度，动态设置重叠偏移
        if (_bottomCardHeight > 0)
          Positioned(
            left: 0,
            right: 0,
            top: _bottomCardHeight - 40, // 这里的40是重叠的高度，可自定义
            child: Container(
              constraints: const BoxConstraints(minHeight: 200),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(24),
                color: Colors.black,
              ),
              child: const Padding(
                padding: EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("顶部动态内容", style: TextStyle(fontSize: 20, color: Colors.white)),
                    SizedBox(height: 20),
                    Text("这里的内容会自适应高度"),
                    SizedBox(height: 150),
                    Text("更多动态内容"),
                  ],
                ),
              ),
            ),
          ),
      ],
    );
  }
}

然后在CustomScrollView中使用：

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: DynamicOverlappedCards(),
      ),
    ),
    // 后面的列表内容
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("列表项 $index")),
        childCount: 20,
      ),
    ),
  ],
)

这个方案的优势是实现简单，完全适配动态内容的高度，不需要手动计算固定高度。

总结 #

根据你的需求选就行：

• 如果要实现滚动时收起堆叠卡片的交互，优先用方案一的SliverPersistentHeader；
• 如果只是需要列表中一组自适应高度的堆叠卡片，方案二更省心。

备注：内容来源于stack exchange，提问作者Abdul Samad