ReorderableListView : 多个小部件使用相同的 GlobalKey答案

【问题标题】：ReorderableListView :Multiple widgets used the same GlobalKeyReorderableListView : 多个小部件使用相同的 GlobalKey
【发布时间】：2019-06-07 20:29:39
【问题描述】：

我正在开发一个页面使用 ReorderableListView 小部件的应用程序。向上拖动 Tile 时出现错误，但是当我向下拖动任何 Tile 时，它工作正常。该错误与多个小部件使用的全局键有关，但所有键彼此不同。任何帮助，将不胜感激。提前致谢。附上视频链接和代码供参考。

class GurmatLekh extends StatefulWidget {
  @override
  _GurmatLekhState createState() => _GurmatLekhState();
}

Widget listTile(
    { String key, Widget widget, String title}) {
  BuildContext context;
  return Container(
      key: Key(key),
      decoration: BoxDecoration(
          color: theme == 1 ? Colors.black : Colors.white,
          borderRadius: BorderRadius.circular(5),
          border: Border.all(color: Colors.lightBlue)),
      child: ListTile(
        onTap: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => widget)),
        title: Text(
          title,
          style: TextStyle(
              color: theme == 0 ? Colors.black : Colors.white,
              fontFamily: "GurbaniAkhar",
              fontSize: 20.0),
        ),
      ));
}

class _GurmatLekhState extends State<GurmatLekh> {
  List<Widget> list = [
    listTile(key: "1", title: "1", widget: listTile1()),//listTile1 is the next Page.
    listTile(key: "2", title: "2", widget: listTile2()),//listTile2 is the next Page.
    listTile(key: "3", title: "3", widget: listTile3()),//listTile3 is the next Page.
    listTile(key: "4", title: "4", widget: listTile4()),//listTile4 is the next Page.
    listTile(key: "5", title: "5", widget: listTile5()),//listTile5 is the next Page.
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color.fromRGBO(50, 42, 57, 1.0),
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          centerTitle: true,
          title: Text(
            "gurmiq lyK", //gurmat lekh
            style: TextStyle(
                fontFamily: "Prabhki",
                fontSize: 27.0,
                fontWeight: FontWeight.bold),
          ),
        ),
        body: Stack(children: <Widget>[
          Opacity(
            opacity: 0.6,
            child: Container(
              color: Colors.teal,
            ),
          ),
          ReorderableListView(
            children: list,
            onReorder: (oldIndex, newIndex) {
              print(oldIndex);
              print(newIndex);

              if (newIndex > list.length) newIndex = list.length;
              if (oldIndex < newIndex) newIndex--;

              Widget widget = list[oldIndex];
              list.remove(widget);
              list.insert(newIndex, widget);
              setState(() {});
            },
          ),
        ]));
  }
}

Here is the video for my error

这是AS控制台出现的错误

I/flutter ( 6893): The following assertion was thrown building LongPressDraggable<Key>(state:
I/flutter ( 6893): _DraggableState<Key>#a6138):
I/flutter ( 6893): Multiple widgets used the same GlobalKey.
I/flutter ( 6893): The key [GlobalObjectKey ValueKey<String>#c5ac5] was used by multiple widgets. The parents of those
I/flutter ( 6893): widgets were:
I/flutter ( 6893): - Listener(listeners: [down], behavior: deferToChild, renderObject: RenderPointerListener#ef3da
I/flutter ( 6893):   relayoutBoundary=up4 NEEDS-LAYOUT)
I/flutter ( 6893): - Listener(listeners: [down], behavior: deferToChild, renderObject: RenderPointerListener#78330
I/flutter ( 6893):   relayoutBoundary=up3)
I/flutter ( 6893): A GlobalKey can only be specified on one widget at a time in the widget tree.
I/flutter ( 6893): 
I/flutter ( 6893): When the exception was thrown, this was the stack:
I/flutter ( 6893): #0      GlobalKey._debugReserveFor.<anonymous closure> (package:flutter/src/widgets/framework.dart:172:11)
I/flutter ( 6893): #1      GlobalKey._debugReserveFor (package:flutter/src/widgets/framework.dart:190:6)
I/flutter ( 6893): #2      Element.updateChild.<anonymous closure> (package:flutter/src/widgets/framework.dart:2724:13)
I/flutter ( 6893): #3      Element.updateChild (package:flutter/src/widgets/framework.dart:2727:6)
I/flutter ( 6893): #4      SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #5      Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #6      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #7      Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #8      StatefulElement.update (package:flutter/src/widgets/framework.dart:3878:5)
I/flutter ( 6893): #9      Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #10     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #11     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #12     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #13     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #14     StatefulElement.update (package:flutter/src/widgets/framework.dart:3878:5)
I/flutter ( 6893): #15     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #16     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #17     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #18     StatelessElement.update (package:flutter/src/widgets/framework.dart:3781:5)
I/flutter ( 6893): #19     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #20     RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:4585:32)
I/flutter ( 6893): #21     MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4975:17)
I/flutter ( 6893): #22     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #23     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #24     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #25     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #26     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #27     ProxyElement.update (package:flutter/src/widgets/framework.dart:3990:5)
I/flutter ( 6893): #28     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #29     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #30     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #31     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #32     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #33     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #34     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #35     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #36     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #37     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #38     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #39     StatefulElement.update (package:flutter/src/widgets/framework.dart:3878:5)
I/flutter ( 6893): #40     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #41     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #42     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #43     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #44     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #45     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #46     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #47     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14)
I/flutter ( 6893): #48     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #49     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #50     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #51     StatelessElement.update (package:flutter/src/widgets/framework.dart:3781:5)
I/flutter ( 6893): #52     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #53     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #54     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #55     StatefulElement.update (package:flutter/src/widgets/framework.dart:3878:5)
I/flutter ( 6893): #56     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #57     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #58     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #59     StatefulElement.update (package:flutter/src/widgets/framework.dart:3878:5)
I/flutter ( 6893): #60     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #61     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 6893): #62     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 6893): #63     StatelessElement.update (package:flutter/src/widgets/framework.dart:3781:5)
I/flutter ( 6893): #64     Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 6893): #65     _LayoutBuilderElement._layout.<anonymous closure> (package:flutter/src/widgets/layout_builder.dart:118:18)
I/flutter ( 6893): #66     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2266:19)
I/flutter ( 6893): #67     _LayoutBuilderElement._layout (package:flutter/src/widgets/layout_builder.dart:107:11)
I/flutter ( 6893): #68     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1730:58)
I/flutter ( 6893): #69     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:799:15)
I/flutter ( 6893): #70     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1730:13)
I/flutter ( 6893): #71     _RenderLayoutBuilder.performLayout (package:flutter/src/widgets/layout_builder.dart:205:5)
I/flutter ( 6893): #72     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 6893): #73     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
I/flutter ( 6893): #74     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 6893): #75     __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 6893): #76     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 6893): #77     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
I/flutter ( 6893): #78     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 6893): #79     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:142:11)
I/flutter ( 6893): #80     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:339:7)
I/flutter ( 6893): #81     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:212:7)
I/flutter ( 6893): #82     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:356:14)
I/flutter ( 6893): #83     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1509:7)
I/flutter ( 6893): #84     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:768:18)
I/flutter ( 6893): #85     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:281:19)
I/flutter ( 6893): #86     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:677:13)
I/flutter ( 6893): #87     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5)
I/flutter ( 6893): #88     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter ( 6893): #89     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter ( 6893): #90     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter ( 6893): #91     _invoke (dart:ui/hooks.dart:154:13)
I/flutter ( 6893): #92     _drawFrame (dart:ui/hooks.dart:143:3)
I/flutter ( 6893): ════════════════════════════════════════════════════════════════════════════════════════════════════

【问题讨论】：

你能发布你的 listTile() 方法吗？
我已经更新了我的代码。请检查并帮助我！
另见github.com/flutter/flutter/issues/21829, github.com/flutter/flutter/issues/24660
@GünterZöchbauer 谢谢你解决了我的问题，但我不知道为什么，如果你能解释一下。提前致谢。
不确定“that”是什么意思，但看起来 Flutter 中确实存在问题，您可能已经应用了解决方法。

标签： android dart flutter material-design

【解决方案1】：

对于未来的访问者，如果有人遇到同样的问题，那么这很好地解决了我的问题。Github issue link

我将 onReorder 方法更改为下面的方法。基本上我将这个过程延迟了 100 毫秒，而且效果很好。

onReorder: (oldIndex, newIndex) {
          if (newIndex > list.length) newIndex = list.length;
          if (oldIndex < newIndex) newIndex--;


          Future.delayed(Duration(milliseconds: 100), (){
            setState(() {
              final Widget item = list.removeAt(oldIndex);
              list.insert(newIndex, item);
            });
          });
        },

【讨论】：

这意味着 Flutter 需要一个额外的构建周期来更新其缓存中的键，以免造成冲突。
我工作！您也可以将其设置为 20 毫秒。（它消除了滞后）。
如果我在对话框中而不是 statefulwidget 会怎样？那里怎么能调用setState呢？

【解决方案2】：

就我而言，问题是我没有使用索引作为键，这就是问题发生的原因：多个小部件使用相同的 GlobalKey。所以我要做的就是像这样将索引作为键：

ReorderableListView(
              children: [
                for (final item in seeds)
                  Card(
                    key: Key(seeds.indexOf(item).toString()),
                    child: ListTile(
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => BuildSeed(
                            seed: item,
                            isSaved: false,
                          ),
                        ),
                      ),

类似的东西，可能与你的情况不同，但这就是我的解决方法。

【讨论】：