Flutter卡片堆栈

Question

我想创建一叠卡片，它们相互重叠、错开，以便可视化一个卡片的多个版本。

我尝试将卡片放在卡片内部，但无法找到偏移它们的方法。 我还尝试使用 stack 类，但没有成功。

有人知道如何实现这种效果吗？

- Håkon Halldal

---

请展示一下你已经尝试的代码，这可能有助于回答问题。请参阅：如何提问。 - P. Moloney

正如@P.Moloney所建议的那样，目前无法回答您的问题。我特别推荐在"How to ask"部分中使用Minimal, Complete and Verifiable Example。 - Samuel Hulla

我尝试使用以下代码：return new Container( child: new Card( margin: EdgeInsets.all(4.0), child: new ListCard( koblingsordre: list[index], ), ), );这会在一起放置两张卡片，但没有像图片中那样的偏移选项。我还尝试使用堆栈类，但效果与我想要的相差甚远。抱歉，这是一条评论，我没有足够的积分来编辑，它说我不能再次上传图片... - Håkon Halldal

Answer 1

使用Stack是正确的做法，只需要找到如何对部件进行偏移即可。对于堆栈的“顶部”，最好的方法是使用填充（padding），但您不希望指定每个卡的大小……如果堆栈可以根据实际显示的内容增长/缩小，那就更好了。

为此，您可以在所有卡的大小都指定的情况下使用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..(卡片数-1)，并为每个定位小部件计算适当的偏移量（每个小部件包含一个基本上为空的卡片）。

然后将其从可迭代转换为列表使用.toList()，但还没有顶部的卡片...所以我进行内联添加（我确定有更好的词来描述，但我不知道是什么）具有适当偏移量和包含子元素的Padding小部件。 ..add只是使它可以在一行中完成-它返回列表而不是void，就像.add一样。感谢dart =)！

我让它有点灵活，但您可以进一步定义偏移量作为两个参数，使其可以朝不同方向等。无论如何，代码的结果如下：

- rmtmckenzie

Answer 2

这可能不是最佳方法，但根据您在评论中发布的示例，您可以使用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"),
        ),
      )),
    ),
  ],
)

Which will look like this:

你可以使用不同的填充等来自定义它。

- Bostrot

---

除非我弄错了，对于这个答案，你需要确保手动设置“底部”卡片与顶部卡片具有完全相同的大小（@Bostrot通过简单地使用相同的内容来解决这个问题）。虽然这样做可以实现目的，但并不是最理想的。 - rmtmckenzie