滑动以在颤振中交换两个容器

Question

我有两个水平放置的容器。

如何使用GestureDetector来检测滑动（从上到下或从下到上）并用一些动画滑动这些容器？

我附上一张图片：

如果您从 C2 滑动到 C1（或 C1 到 C2），这些容器将交换。

Answer 1

我相信有很多更好的解决方案，但您可以查看此临时解决方法：

import 'package:flutter/material.dart';

void main() {
  runApp(TestPage());
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  double address1Top = 20;
  double address2Top = 110;
  bool isFirstUp = true;
  bool isSecondUp = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 150,
      color: Colors.blue,
      child: Stack(
        children: <Widget>[
     
          Positioned(
            top: isFirstUp ? address1Top : address2Top,
            left: 20,
            child: GestureDetector(
              onVerticalDragUpdate: (details) {
                if (details.delta.dy > 1 && isFirstUp) {
                  setState(() {
                    isFirstUp = false;
                    isSecondUp = true;
                  });
                }

                if (details.delta.dy < -1 && isSecondUp) {
                  setState(() {
                    isFirstUp = true;
                    isSecondUp = false;
                  });
                }
              },
              child: Container(
                width: 140,
                child: Center(
                  child: Text("A"),
                ),
                color: Colors.red,
              ),
            ),
          ),
          // Bottom address
          Positioned(
            top: isSecondUp ? address1Top : address2Top,
            left: 20,
            child: GestureDetector(
              onVerticalDragUpdate: (details) {
               if (details.delta.dy < -1 && isFirstUp) {
                  setState(() {
                    isFirstUp = false;
                    isSecondUp = true;
                  });
                }

                if (details.delta.dy > 1 && isSecondUp) {
                  setState(() {
                    isFirstUp = true;
                    isSecondUp = false;
                  });
                }
              },
              child: Container(
                width: 140,
                child: Center(
                  child: Text("B"),
                ),
                color: Colors.green,
              ),
            ),
          ),
          
        ],
      ),
    );
  }
}

您可以设置小于-1和大于1以获得更高的灵敏度。