Question

我正在尝试进行堆叠列表的这种设计，但是不能在抖动中进行负填充，因此我需要另一种方法来实现这种重叠效果。

Answer 1

您可以使用Stack和Positioned（知道卡片的高度）。像这样：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Stack(
        children: <Widget>[
          Positioned(
            bottom: 150.0,
            left: 0.0,
            right: 0.0,
            child: Card(
              margin: EdgeInsets.zero,
              elevation: 3.0,
              color: Colors.red,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
              ),
              child: Container(
                width: double.infinity,
                height: 200.0,
              ),
            ),
          ),
          Positioned(
            bottom: 50.0,
            left: 0.0,
            right: 0.0,
            child: Card(
              margin: EdgeInsets.zero,
              elevation: 3.0,
              color: Colors.blue,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
              ),
              child: Container(
                width: double.infinity,
                height: 200.0,
              ),
            ),
          ),
          Positioned(
            bottom: -50.0,
            left: 0.0,
            right: 0.0,
            child: Card(
              margin: EdgeInsets.zero,
              elevation: 3.0,
              color: Colors.orange,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
              ),
              child: Container(
                width: double.infinity,
                height: 200.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我建议制作一个单独的窗口小部件，以避免代码重复，并且可能从列表中进行填充。我只是在后面提出想法。

Final result

Answer 2

这只是为了给您一个想法。

List<Color> _colors = [Colors.orange, Colors.blue, Colors.green];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return Container(
          height: 100,
          alignment: Alignment.center,
          child: Text("Item ${index}"),
          decoration: BoxDecoration(
            color: _colors[index % 3],
            boxShadow: [BoxShadow(color: Colors.black, blurRadius: 10, spreadRadius: 5)],
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(40),
              topRight: Radius.circular(40),
            ),
          ),
        );
      },
    ),
  );
}

如何使卡片在颤抖中垂直堆叠？

2 个答案: