Flutter：在一堆小部件中结合 Draggable 和 GestureDetector

Question

I'm trying to have a stack of Container widgets that are able to be dragged around and dropped in place, but also moved to the top of the stack if tapped. At the moment, I can only get one or the other to work.

The code below allows dragging and dropping, but the moveToTop function in each GestureDetector doesn't seem to work. drag.gif

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StackOfContainers(),
    );
  }
}
class StackOfContainers extends StatefulWidget {
  @override
  _StackOfContainersState createState() => _StackOfContainersState();
}

class _StackOfContainersState extends State<StackOfContainers> {
  List<Offset> draggablePositions = [Offset(0, 0), Offset(30, 30), Offset(60, 60)];

  List<GlobalKey> draggableKeys = [GlobalKey(), GlobalKey(), GlobalKey()];

  List<Widget> stackOfContainers = [];

  void moveToTop(Key key) {
    setState(() {
      for (var i = 0; i < stackOfContainers.length; i++) {
        Widget container = stackOfContainers[i];
        if (key == container.key) {
          stackOfContainers.remove(container);
          stackOfContainers.add(container);
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    stackOfContainers = [
      Positioned(
        key: draggableKeys[0],
        top: draggablePositions[0].dy,
        left: draggablePositions[0].dx,
        child: GestureDetector(
          onTap: () {
            setState(() {
              moveToTop(draggableKeys[0]);
            });
          },
          child: Draggable(
            onDraggableCanceled: (velocity, offset) {
              setState(() {
                draggablePositions[0] = offset;
              });
            },
            child: Container(
              color: Colors.lightBlueAccent,
              height: 100,
              width: 100,
            ),
            feedback: Container(
              color: Colors.lightBlueAccent,
              height: 100,
              width: 100,
            ),
            childWhenDragging: Container(),
          ),
        ),
      ),
      Positioned(...),
      Positioned(...)
    ];

    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          children: stackOfContainers,
        ),
      ),
    );
  }


}

(The two Positioned(...) widgets above are similar pink and yellow containers.)

If I move stackOfContainers inside initState() , then moveToTop works in each GestureDetector but each container returns to the starting point after dragging.

tap.gif

...

class _StackOfContainersState extends State<StackOfContainers> {
  @override
  void initState() {
    super.initState();
    stackOfContainers=[
      Positioned(...),
      Positioned(...),
      Positioned(...)
    ];
 }

...

Is there a way to combine these functionalities?

Answer 1

I'm not sure but I think you are just dragging,not tapping.So onTap will not work.