flutter 的卡片堆

Question

我试图创建一堆卡片，相互叠加和偏移以可视化一张卡片的多个版本。

我曾尝试将卡片放入卡片中，但没有找到抵消它们的方法。我也尝试过使用堆栈类，但没有成功。

有人知道我怎样才能达到这种效果吗？

Answer 1

您使用 Stack 的方向是正确的 - 您只需要弄清楚如何偏移小部件。对堆栈的“顶部”执行此操作的最佳方法是使用填充，但您不想指定每张卡片的大小......如果堆栈根据以下内容增长/缩小会更好实际显示的内容。

为此，您可以将 Positioned 与为卡片指定的所有尺寸一起使用。这将确保它们增长到适当的大小，而无需调整堆栈大小或不必指定它们的每个大小。

代码如下:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Container(
          color: Colors.grey,
          child: ListView(
            children: [
              StackOfCards(
                child: Container(height: 100.0),
                num: 5,
              ),
              StackOfCards(
                child: Container(height: 100.0),
                num: 4,
              ),
              StackOfCards(
                child: Container(height: 100.0),
                num: 3,
              ),
              StackOfCards(
                child: Container(height: 100.0),
                num: 2,
              ),
              StackOfCards(
                child: Container(height: 100.0),
                num: 1,
              )
            \],
          ),
        ),
      ),
    );
  }
}

class StackOfCards extends StatelessWidget {
  final int num;
  final Widget child;
  final double offset;

  const StackOfCards({Key key, int num = 1, @required this.child, this.offset = 10.0})
      : this.num = num > 0 ? num : 1,
        assert(offset != null),
        super(key: key);

  @override
  Widget build(BuildContext context) => Stack(
        children: List<Widget>.generate(
            num - 1,
            (val) => Positioned(
                bottom: val * offset,
                left: val * offset,
                top: (num - val - 1) * offset,
                right: (num - val - 1) * offset,
                child: Card(child: Container()))).toList()
          ..add(
            Padding(
              child: Card(child: child),
              padding: EdgeInsets.only(bottom: (num - 1) * offset, left: (num - 1) * offset),
            ),
          ),
      );
}

嗯……我猜构建函数可能需要稍微解释一下。我正在做的是使用生成的列表从 0..(num cards - 1) 开始迭代并为每个 Positioned 小部件计算适当的偏移量(每个小部件都包含一个基本为空的卡片)。

然后使用 .toList() 从一个可迭代对象生成一个列表，但是还没有最上面的卡片...所以我做了一个内联添加(我确定有一个更好的词，但我不知道)具有适当偏移量并包含子项的 Padding 小部件。 ..add 只是让我可以在一行中完成它 - 它返回列表而不是像 .add 那样返回 void。耶飞镖 =)!

我让它有点灵活，但你可以更进一步，将偏移量定义为两个参数，这样你就可以去不同的方向等。无论如何，代码结果如下: