Question

我正在使用拖放功能开发应用程序，但我只想要屏幕上一次拖动一次，或者仅在屏幕上显示一个反馈屏幕。当我用两根手指拖到框上时，两个反馈都显示在屏幕上。我所做的是如果屏幕上拖了一个拖动那么其他框是不可拖动的，但是如果您同时点击两个框，两个框均可拖动。如何制止这些阻力？ Image Example

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” 时，还可以使用setState来重构另外两个小部件。在我的设备上测试过。看看这是否适合您。祝你好运。

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

如何在Flutter中停止多重拖动？

1 个答案: