颤动的卡片堆

Question

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

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

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

Answer 1

这可能不是最好的方法，但根据您在评论中发布的示例，您可以将其与 Stack 和 Padding 对齐：

Stack(
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.only(top: 8.0, right: 8.0),
      child: Card(
          child: Center(
        child: Padding(
          padding: const EdgeInsets.all(50.0),
          child: Text("Content"),
        ),
      )),
    ),
    Padding(
      padding: const EdgeInsets.only(left: 8.0, bottom: 8.0),
      child: Card(
          child: Center(
        child: Padding(
          padding: const EdgeInsets.all(50.0),
          child: Text("Content"),
        ),
      )),
    ),
  ],
)

看起来像这样：

然后您可以通过设置不同的填充等对其进行自定义

Answer 2

您使用 Stack 的方向是正确的 - 您只需要弄清楚如何偏移小部件。对堆栈的 'top' 执行此操作的最佳方法是使用填充，但您不想指定每张卡片的大小......如果堆栈 grows/shrinks 以实际显示的内容为准。

为此，您可以将 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 只是为了让我可以在一行中完成它 - 它 returns 列表而不是像 .add 那样的 void 。太棒了 =)!

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

颤动的卡片堆

Flutter stack of cards

flutter

flutter-layout