Flutter 轻扫以交换颤振中的两个容器

我有两个水平放置的容器

如何使用

GestureDetector

，检测滑动（从上到下或从下到上），并通过一些动画滑动这些容器

我附上一张照片：

---

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

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

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,
              ),
            ),
          ),
          
        ],
      ),
    );
  }
}

进口“包装：颤振/材料.省道”；
void main（）{
runApp（TestPage（））；
}
类TestPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：ThemeData.dark（），
debugShowCheckedModeBanner:false，
家：脚手架(
正文：中(
子项：MyWidget（），
),
),
);
}
}
类MyWidget扩展了StatefulWidget{
@凌驾
createState（）=>\u MyWidgetState（）；
}
类_MyWidgetState扩展状态{
双地址1top=20；
双地址2top=110；
bool isFirstUp=true；
bool-isSecondUp=false；
@凌驾
小部件构建（构建上下文）{
返回容器(
宽度：300，
身高：150，
颜色：颜色，蓝色，
子：堆栈(
儿童：[
定位(
顶部：isFirstUp？地址1顶部：地址2顶部，
左:20,，
儿童：手势检测器(
onVerticalDragUpdate：（详细信息）{
如果（details.delta.dy>1&&isFirstUp）{
设置状态（）{
isFirstUp=false；
isSecondUp=true；
});
}
如果（details.delta.dy<-1&&isSecondUp）{
设置状态（）{
isFirstUp=true；
isSecondUp=false；
});
}
},
子：容器(
宽度：140，
儿童：中心(
子项：文本（“A”），
),
颜色：颜色，红色，
),
),
),
//底部地址
定位(
顶部：isSecondUp？地址1顶部：地址2顶部，
左:20,，
儿童：手势检测器(
onVerticalDragUpdate：（详细信息）{
如果（details.delta.dy<-1&&isFirstUp）{
设置状态（）{
isFirstUp=false；
isSecondUp=true；
});
}
如果（details.delta.dy>1&&isSecondUp）{
设置状态（）{
isFirstUp=true；
isSecondUp=false；
});
}
},
子：容器(
宽度：140，
儿童：中心(
儿童：文本（“B”），
),
颜色：颜色。绿色，
),
),
),
],
),
);
}
}

---

您可以将小于

-1

和大于

1

设置为更敏感。

是否可以在此处实现交换动画？（例如交换listview上的项目）当然可以。你可以看看这里：