我想在Flutter中构建一个UI，使卡片垂直叠放，彼此略有重叠，设计与下方图片相似：

我尝试使用带负边距的Container，但Flutter不支持这种做法。可以像下面这样使用Stack简单复现：

Stack(
  children: [
    Container(
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(24),
        color: Colors.green,
      ),
    ),
    Positioned(
      top: 160,
      left: 0,
      right: 0,
      child: Container(
        height: 300,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(24),
          color: Colors.black,
        ),
      ),
    ),
  ],
)

但这在处理动态内容时扩展性不好。
我想要一个可与CustomScrollView和 Sliver一起使用的方案，这样在用户滚动列表时，这些区段就能被收起。

解决方案

这或许有用！

你可以使用 Column，让新卡片往上偏移一点。由于偏移，底部可能会多出一点空白，但我认为可以处理。

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            height: 500,
            child: Column(
              children: [
                Expanded(child: Container(color: Colors.pink)),
                Expanded(
                  child: Transform.translate(
                    offset: Offset(0, -32),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(32),
                          topRight: Radius.circular(32),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}