如何阻止多重拖曳的颤振？

Question

我正在开发一个使用拖放的应用程序，但是我希望一次只在屏幕上拖一次，或者在屏幕上只显示一个反馈。当我使用两个手指拖动到框中时，两个反馈都显示在屏幕上。我所做的是，如果一个拖动在屏幕上，那么其他的框是不可拖的，但如果你同时点击两个盒子，两个盒子都是可拖的。如何阻止这些拖曳？图像示例

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: new MyHomePage(title: 'Flutter Demo Drag Box'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body:
          new DragGame(), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class DragGame extends StatefulWidget {
  @override
  _DragGameState createState() => new _DragGameState();
}

class _DragGameState extends State<DragGame> {
  int boxNumberIsDragged;

  @override
  void initState() {
    boxNumberIsDragged = null;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
        constraints: BoxConstraints.expand(),
        color: Colors.grey,
        child: new Stack(
          children: <Widget>[
            buildDraggableBox(1, Colors.red, new Offset(30.0, 100.0)),
            buildDraggableBox(2, Colors.yellow, new Offset(30.0, 200.0)),
            buildDraggableBox(3, Colors.green, new Offset(30.0, 300.0)),
          ],
        ));
  }

  Widget buildDraggableBox(int boxNumber, Color color, Offset offset) {
    return new Draggable(
      maxSimultaneousDrags: boxNumberIsDragged == null || boxNumber == boxNumberIsDragged ? 1 : 0,
      child: _buildBox(color, offset),
      feedback: _buildBox(color, offset),
      childWhenDragging: _buildBox(color, offset, onlyBorder: true),
      onDragStarted: () {
        setState((){
          boxNumberIsDragged = boxNumber;
        });
      },
      onDragCompleted: () {
        setState((){
          boxNumberIsDragged = null;
        });
      },
      onDraggableCanceled: (_,__) {
        setState((){
          boxNumberIsDragged = null;
        });
      },
    );
  }

  Widget _buildBox(Color color, Offset offset, {bool onlyBorder: false}) {
    return new Container(
      height: 50.0,
      width: 50.0,
      margin: EdgeInsets.only(left: offset.dx, top: offset.dy),
      decoration: BoxDecoration(
          color: !onlyBorder ? color : Colors.grey,
          border: Border.all(color: color)),
    );
  }
}

Answer 1

你在找maxSimultaneousDrags吗

https://docs.flutter.io/flutter/widgets/Draggable-class.html

编辑1:只有当用户开始移动手指时才会触发onDragStarted。你需要的是onTap。

编辑2:请改为onTap => onTapDown。当一个小部件是"tapDowned"时，还可以使用tapDowned重构另外两个小部件。在我的设备上测试过。看看这个对你有用吗。祝好运。

Widget buildDraggableBox(int boxNumber, Color color, Offset offset) {
    return new GestureDetector(
      child: Draggable(
        maxSimultaneousDrags: boxNumberIsDragged == null || boxNumber == boxNumberIsDragged ? 1 : 0,
        child: _buildBox(color, offset),
        feedback: _buildBox(color, offset),
        childWhenDragging: _buildBox(color, offset, onlyBorder: true),
        onDragStarted: () {
          setState((){

          });
        },
        onDragCompleted: () {
          setState((){
            boxNumberIsDragged = null;
          });
        },
        onDraggableCanceled: (_,__) {
          setState((){
            boxNumberIsDragged = null;
          });
        },
      ),
      onTapDown: (_) {
          setState(() {
            boxNumberIsDragged = boxNumber;
      });
    )
  }