Question

我想开发像将一个列表项拖到另一个可能为空的列表一样。如果将dragitem放在另一个列表的特定项目上，则将被拖动的项目添加到它所拖动到的列表的索引中，并且同样的东西也将适用于同一列表。我尝试过，但在选择dragitem时却无法使其像滚动listview一样，并且只有3个可见项。

我想这样发展：https://i.stack.imgur.com/bdn1I.gif

任何帮助表示赞赏。

Answer 1

您要开发的内容可以使用 Draggable 和 DragTarget 完成，但是您必须知道 Draggable和DragTarget都应具有相同的数据类型

我将简要解释两个小部件，然后在本段之后，发布完整的代码，然后分别解释每个部分。

Draggable是可用于使用户将一个小部件从一个位置拖动到另一个位置的小部件，但是只能将其拖放到相同类型的DragTarget小部件上并进行处理

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) =>
      MaterialApp(
        home: Drag(),
      );
}

class Drag extends StatefulWidget {
  @override
  _DragState createState() => _DragState();
}

class _DragState extends State<Drag> {
  List listA = ["A", "B", "C"];
  List listB = ["D", "E", "F"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.greenAccent[200],
      body: SafeArea(
        child: Column(
          children: [
//            list view separated will build a widget between 2 list items to act as a separator
            Expanded(
                child: ListView.separated(
                  itemBuilder: _buildListAItems,
                  separatorBuilder: _buildDragTargetsA,
                  itemCount: listA.length,
                )),
            Expanded(
                child: ListView.separated(
                  itemBuilder: _buildListBItems,
                  separatorBuilder: _buildDragTargetsB,
                  itemCount: listB.length,
                )),
          ],
        ),
      ),
    );
  }

//  builds the widgets for List B items
  Widget _buildListBItems(BuildContext context, int index) {
    return Draggable<String>(
//      the value of this draggable is set using data
      data: listB[index],
//      the widget to show under the users finger being dragged
      feedback: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            listB[index],
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
//      what to display in the child's position when being dragged
      childWhenDragging: Container(
        color: Colors.grey,
        width: 40,
        height: 40,
      ),
//      widget in idle state
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            listB[index],
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }

//  builds the widgets for List A items
  Widget _buildListAItems(BuildContext context, int index) {
    return Draggable<String>(
      data: listA[index],
      feedback: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            listA[index],
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
      childWhenDragging: Container(
        color: Colors.grey,
        width: 40,
        height: 40,
      ),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            listA[index],
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }

//  will return a widget used as an indicator for the drop position
  Widget _buildDropPreview(BuildContext context, String value) {
    return Card(
      color: Colors.lightBlue[200],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          value,
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }

//  builds DragTargets used as separators between list items/widgets for list A
  Widget _buildDragTargetsA(BuildContext context, int index) {
    return DragTarget<String>(
//      builder responsible to build a widget based on whether there is an item being dropped or not
      builder: (context, candidates, rejects) {
        return candidates.length > 0 ? _buildDropPreview(context, candidates[0]):
            Container(
              width: 5,
              height: 5,
            );
      },
//      condition on to accept the item or not
      onWillAccept: (value)=>!listA.contains(value),
//      what to do when an item is accepted
      onAccept: (value) {
        setState(() {
          listA.insert(index + 1, value);
          listB.remove(value);
        });
      },
    );
  }

//  builds drag targets for list B
  Widget _buildDragTargetsB(BuildContext context, int index) {
    return DragTarget<String>(
      builder: (context, candidates, rejects) {
        return candidates.length > 0 ? _buildDropPreview(context, candidates[0]):
        Container(
          width: 5,
          height: 5,
        );
      },
      onWillAccept: (value)=>!listB.contains(value),
      onAccept: (value) {
        setState(() {
          listB.insert(index + 1, value);
          listA.remove(value);
        });
      },
    );
  }
}

以下部分负责为ListB构建Draggable小部件，此Draggable小部件将基于索引显示列表的值，并将列表项值设置为可拖动的数据，以便dragTarget可以处理可拖动的。

//  builds the widgets for List B items
  Widget _buildListBItems(BuildContext context, int index) {
    return Draggable<String>(
//      the value of this draggable is set using data
      data: listB[index],
//      the widget to show under the users finger being dragged
      feedback: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            listB[index],
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
//      what to display in the child's position when being dragged
      childWhenDragging: Container(
        color: Colors.grey,
        width: 40,
        height: 40,
      ),
//      widget in idle state
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            listB[index],
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }

这部分代码将处理来自listB的可拖动对象（如果修改代码，也可以是listA），它将基于它们的值接受/拒绝可拖动对象，如果可拖动的可以，它将使用修改后的列表设置setState，以便创建新状态并更改ui。

//  builds DragTargets used as separators between list items/widgets for list A
  Widget _buildDragTargetsA(BuildContext context, int index) {
    return DragTarget<String>(
//      builder responsible to build a widget based on whether there is an item being dropped or not
      builder: (context, candidates, rejects) {
        return candidates.length > 0 ? _buildDropPreview(context, candidates[0]):
            Container(
              width: 5,
              height: 5,
            );
      },
//      condition on to accept the item or not
      onWillAccept: (value)=>!listA.contains(value),
//      what to do when an item is accepted
      onAccept: (value) {
        setState(() {
          listA.insert(index + 1, value);
          listB.remove(value);
        });
      },
    );
  }

最后，在此代码中，正如我上面提到的，它仅接受从列表A到列表B的可拖动对象，反之亦然，但是它将不接受从相同列表到相同列表的可拖动对象。最重要的是，我没有考虑某些情况，但是您可以考虑，这些情况是：

将项目放在列表顶部
在列表底部放置一个项目
将项目从列表移动到空列表

example 1

example 2

希望我的回答有帮助！

多个列表之间的Flutter拖放列表项

1 个答案: