flutter - 可重新排序列表中的弹出菜单不合适

Question

有谁知道在 ReorderableListView 中使用 PopupMenuButton 时为什么会在错误的位置呈现？在普通 ListView 中使用时，它似乎可以正确呈现。

这是一个示例屏幕截图:



对于那些想要示例代码的人:

import 'package:flutter/material.dart';

void main() {
  runApp(ListApp());
}

class ListApp extends StatefulWidget {
  @override
  _ListAppState createState() => _ListAppState();
}

class _ListAppState extends State<ListApp> {
  List<String> items = [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
    "Item 7",
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reorder List'),
        ),
        body: Container(
          child: ReorderableListView(
              // child: ListView(

              onReorder: (oldIndex, newIndex) {
                int deleteIndex = oldIndex;
                items.insert(newIndex, items[oldIndex]);

                if (oldIndex > newIndex) {
                  // The old index is now 1 index higher
                  deleteIndex++;
                }
                items.removeAt(deleteIndex);
                setState(() {
                  items = items;
                });
              },

              children: items.map((item) {
                return Card(
                  key: Key(item),
                  child: ListTile(
                    title: Text(item),
                    trailing: PopupMenuButton(
                      itemBuilder: (context) {
                        return [
                          PopupMenuItem(
                            child: Text(item),
                            value: item,
                          )
                        ];
                      },
                    ),
                  ),
                );
              }).toList()),
        ),
      ),
    );
  }
}

可能是我以错误的方式使用 PopupMenuButton 还是这个 Widget 有问题？

我希望我的列表可以排序，但出现在错误位置的 PopupMenuButton 是一个问题。

Answer 1

看来问题应该出在 ReorderableListView 小部件的代码，但实际上它隐藏在 中弹出菜单 .计算弹出位置 this code评估叠加层的渲染框:

final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;

因为，默认情况下， Overlay.of在 的情况下，方法搜索最近的叠加层的层次结构ReorderableListView 它返回内部覆盖(为限制拖动手势而创建的)，但对于 ListView 它返回根覆盖。由于根导航器用于显示弹出菜单，因此在前一种情况下会出现移位。
调用 Overlay.of方法与 rootOverlay: true修复错误:

final RenderBox overlay = Overlay.of(context, rootOverlay: true).context.findRenderObject() as RenderBox;

补丁 Flutter SDK 是最合适的解决方案。