Flutter 可拖拽的层叠卡片：优雅的布局解决方案

在 Flutter 中，Stack 是一个强大的布局小部件，允许您将小部件堆叠在一起，从而创建复杂的布局。使用 Stack，您可以轻松创建可拖动的层叠卡片，从而实现直观且引人入胜的用户界面。

要创建可拖动的层叠卡片，您首先需要创建一个 Stack 小部件，然后将要堆叠的小部件作为其子项添加。您可以使用 Container 小部件来创建卡片，并使用 Positioned 小部件来指定卡片的位置。

Stack(
  children: [
    Positioned(
      top: 0,
      left: 0,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 100,
      left: 100,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
  ],
)

上面的代码将创建一个 Stack 小部件，其中包含两个子项：一个红色的卡片和一个绿色的卡片。红色的卡片位于 Stack 的左上角，而绿色的卡片位于红色的卡片的右下角。

为了使卡片可拖动，您可以使用 GestureDetector 小部件。GestureDetector 小部件允许您检测用户手势，例如点击、拖动和缩放。

GestureDetector(
  child: Stack(
    children: [
      Positioned(
        top: 0,
        left: 0,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.red,
        ),
      ),
      Positioned(
        top: 100,
        left: 100,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
      ),
    ],
  ),
  onPanUpdate: (details) {
    // 更新卡片的位置
  },
)

上面的代码将创建一个可拖动的 Stack 小部件。当用户拖动卡片时，onPanUpdate 回调函数将被调用。您可以在回调函数中更新卡片的位置，从而实现拖动效果。

可拖动的层叠卡片非常适合创建直观且引人入胜的用户界面。它们可以用于创建幻灯片、画廊和看板等各种类型的应用程序。