如何在Flutter中使容器可以水平拖动

Question

如何获得可拖动的容器，当它到达特定点时消失，并在那时调用一个函数。此外，文本的可见性也在减少，箭头图标根据长度旋转。如何实现这个功能？

我已经编写了一段代码，并且可以为其添加可见性小部件。但是，如何对其进行约束以及最佳实现方式是什么？请帮助我解决这个问题 -

import 'package:flutter/material.dart';

class SwipeButton extends StatefulWidget {
  const SwipeButton({Key? key}) : super(key: key);

  @override
  _SwipeButtonState createState() => _SwipeButtonState();
}

class _SwipeButtonState extends State<SwipeButton> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.orange,
          width: MediaQuery.of(context).size.width * 0.9,
          height: 50,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Draggable<int>(
                  data: 10,
                  feedback: Container(
                    height: 20.0,
                    width: 20.0,
                    color: Colors.white,
                    child: const Center(
                      child: Icon(
                        Icons.arrow_forward,
                        size: 12,
                      ),
                    ),
                  ),
                  axis: Axis.horizontal,
                  childWhenDragging: Container(
                    height: 20.0,
                    width: 20.0,
                    color: Colors.orange,
                    child: const Center(
                      child: Text(''),
                    ),
                  ),
                  child: Container(
                    height: 20.0,
                    width: 20.0,
                    color: Colors.white,
                    child: const Center(
                      child: Icon(
                        Icons.arrow_forward,
                        size: 12,
                      ),
                    ),
                  ),
                ),
                DragTarget<int>(
                  builder: (
                    BuildContext context,
                    List<dynamic> accepted,
                    List<dynamic> rejected,
                  ) {
                    return Container(
                      height: 20.0,
                      width: 20.0,
                      color: Colors.orange,
                      child: const Center(
                        child: Text(''),
                      ),
                    );
                  },
                  onAccept: (int data) {
                    setState(() {
                      print(data);
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

- Shreyansh Sharma

Answer 1

对于箭头，我们可以使用Transform.rotate。

Transform.rotate(
  angle: deg2rad(-(180 + 20) * (posX / maxWidth)), // 20 comes from icon size
  child: const Icon(
    Icons.arrow_forward,
    size: 12,
  ),
),

我不确定为什么onDragUpdate没有更新UI，你可以从中获取拖动的当前位置，我将其存储在posX上。

我正在使用GestureDetector进行测试用例，应用相同的逻辑，您将获得结果。

在dartPad上运行

class SwipeButton extends StatefulWidget {
  const SwipeButton({Key? key}) : super(key: key);

  @override
  _SwipeButtonState createState() => _SwipeButtonState();
}

class _SwipeButtonState extends State<SwipeButton> {
  double deg2rad(double deg) => deg * pi / 180;
  double posX = 0.0;

  @override
  Widget build(BuildContext context) {
    final maxWidth = MediaQuery.of(context).size.width * 0.9;

    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.orange,
          width: maxWidth * 0.9,
          height: 50,
          child: Stack(
            alignment: Alignment.center,
            children: [
              AnimatedPositioned(
                duration: const Duration(milliseconds: 100),
                left: posX,
                key: const ValueKey("item 1"),
                child: Container(
                  height: 20.0,
                  width: 20.0,
                  color: Colors.white,
                  alignment: Alignment.center,
                  child: Transform.rotate(
                    angle: deg2rad(-(180 + 20) * (posX / maxWidth)),
                    child: const Icon(
                      Icons.arrow_forward,
                      size: 12,
                    ),
                  ),
                ),
              ),
              GestureDetector(
                onPanEnd: (details) {
                  setState(() {
                    posX = 0;
                  });
                },
                onPanUpdate: (details) {
                  setState(() {
                    posX = details.localPosition.dx;
                  });

                  if (posX / maxWidth > .95) {
                    debugPrint("on success drag");
                  }
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

- Yeasin Sheikh