如何使小部件在颤动中相互浮动[关闭]

Posted 2023-02-23

【中文标题】如何使小部件在颤动中相互浮动[关闭]

【英文标题】：how to make widgets float over each other in flutter [closed]

【发布时间】：2021-04-09 09:27:02

【问题描述】：

如何使这两个（如图所示）以这种方式漂浮在卡片上（稍微对齐卡片边框）。

the requested design

这是小部件代码

卡片( 形状：圆角矩形边框（ 边界半径：边界半径.圆形（20）， ), 海拔：3， //颜色：Colors.orange, 孩子：容器（宽度：140，高度：140， 孩子：Image.asset('assets/c1.png', 规模：1，）， ), ),

【问题讨论】：

嗨，欢迎来到堆栈溢出！ Stack Overflow 是一个获取代码相关问题答案的平台。我们通常要求您上传您所做的一些工作，包括您编写的代码。我们不会为您提供从头开始的代码。

【参考方案1】：

下面的代码用于创建它。红牌可以是一个图像，并相应地定位。

 Stack(
      overflow: Overflow.visible,
      children: [
        Positioned(
            top: 10,
            right: -20,
            child: Card(
              elevation: 3,
              color: Colors.red.withOpacity(0.5),
              child: Container(width: 30, height: 50),
            )),
        Card(
          elevation: 1,
          color: Colors.purple,
          child: Container(
            width: 250,
            height: 250,
          ),
        ),
        Positioned(
            top: 20,
            left: -20,
            child: Card(
              elevation: 3,
              color: Colors.orange,
          child: Container(width: 80, height: 80),
        )),

        Positioned(
            top: 20,
            right: -20,
            child: Card(
              elevation: 3,
              color: Colors.red,
              child: Container(width: 120, height: 50),
            ))
      ],
    )

【参考方案2】：

试试 Stack 类 - 看起来你想将小部件排列在一起。

https://api.flutter.dev/flutter/widgets/Stack-class.html