滑動以在顫振中交換兩個容器

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以獲得更高的靈敏度。