Question

我正在尝试创建一叠纸牌，彼此叠放并偏移，以可视化一张纸牌的多个版本。

我尝试将卡片放入卡片中，但是找不到抵消它们的方法。我也尝试过没有运气的堆栈类。

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

Answer 1

使用Stack朝着正确的方向发展-您只需要弄清楚如何偏移小部件即可。对于堆栈“顶部”执行此操作的最佳方法是使用填充，但您不必指定每张卡的大小...如果堆栈根据以下情况增大/缩小，那就更好了。实际显示的内容。

为此，您可以对所有为卡片指定的尺寸使用“定位”。这样可以确保它们增长到合适的大小，而无需调整堆栈大小或不必指定每个大小。

代码如下：

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可以做到这一点，因此我可以一行完成-它返回列表，而不是像.add那样返回void。是的飞镖=）！

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

Screenshot of cards

Answer 2

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

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"),
        ),
      )),
    ),
  ],
)

看起来像这样：

然后您可以通过设置不同的填充等自定义它。

扑扑的纸牌堆

2 个答案: