Flutter：如何在Flutter中跨屏幕或窗口小部件启用拖放功能？

问题描述

如何在整个屏幕或窗口小部件中进行拖放操作？

我想将上方的元素拖放到下面列表中的任何位置。另外，在将其拖到下面的列表中时，我希望目标元素确认为以下元素的格式。

这是我尝试实现的方法。建议进行更改以解决问题或建议适当的实现方法。

我认为这个问题有两个解决方案。

第一个是将元素放在同一列表中，以将拖动功能应用于元素。这就产生了另一个问题。如何在另一个小部件中显示一个列表的内容。另外，我想将它们保留为单独的数据，以用于数据保留。

第二个是，一旦我们尝试将元素拖放到下面的列表中，我们就会创建一个新元素，并在下面的列表中启动拖放操作。

这是每个列表元素小部件的两个类

class _Tile extends StatelessWidget {
  final String text;
  _Tile(this.text);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 70,color: Colors.lightGreen,width: MediaQuery.of(context).size.width,child: Text(
        text,style: TextStyle(fontSize: 30,color: Colors.white),),margin: EdgeInsets.all(5),);
  }
}

class _Tile2 extends StatelessWidget {
  final String text;
  _Tile2(this.text);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,color: Colors.lightBlue,margin: EdgeInsets.all(10),);
  }
}

这里要显示两个列表，每个列表都有一个方法。

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> tilesBottom = <Widget>[
    _Tile("1111111"),_Tile("2222222"),_Tile("3333333"),_Tile("4444444"),_Tile("5555555"),];
  List<Widget> tilesTop = <Widget>[
    _Tile2("aaaaaaa"),_Tile2("bbbbbbb"),_Tile2("ccccccc"),_Tile2("ddddddd"),];

  void _onReorder(int oldIndex,int newIndex) {
    setState(() {
      Widget row = tilesBottom.removeAt(oldIndex);
      tilesBottom.insert(newIndex,row);
    });
  }

  void _onReorder2(int oldIndex,int newIndex) {
    setState(() {
      Widget row = tilesTop.removeAt(oldIndex);
      tilesTop.insert(newIndex,row);
    });
  }

这是构建方法的内部。

  @override
  Widget build(BuildContext context) {
    ScrollController _scrollController =
        PrimaryScrollController.of(context) ?? ScrollController();

    return Scaffold(
      appBar: AppBar(),body: Stack(
        alignment: Alignment.topRight,children: [
          Container(
            height: MediaQuery.of(context).size.height,CustomScrollView(
            controller: _scrollController,slivers: [
              ReorderableSliverList(
                delegate: ReorderableSliverChildListDelegate(tilesBottom),onReorder: _onReorder,)
            ],// This trailing comma makes auto-formatting nicer for build methods.
          ),Positioned(
            child: Container(
              width: MediaQuery.of(context).size.width * 0.5,child: CustomScrollView(
                controller: _scrollController,slivers: [
                  ReorderableSliverList(
                    delegate: ReorderableSliverChildListDelegate(tilesTop),onReorder: _onReorder2,)
                ],],);
  }
}
```[enter image description here][1]


  [1]: https://i.stack.imgur.com/AmJxF.png

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

drag-and-drop listview listview