Flutter ReorderableListView 不适用于 TextFields

Question

我的ReorderableListView中的小部件本质上是TextField。当长按某个小部件时，在长按应导致小部件“悬停”的时间之后，TextField 会接收焦点。如何使拖放效果优先于 TextField？我仍然希望正常点击来激活文本字段。

下面的代码演示了我的问题。

我还尝试使用这个非官方的flutter_reorderable_list包。（要测试这一点，请将示例代码的这一行中的文本小部件替换为 TextField。）

我愿意使用任何丑陋的黑客来实现这一点，包括修改 Flutter 源代码！

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final children = List<Widget>();
    for (var i = 0; i < 5; i++) {
      children.add(Container(
        color: Colors.pink, // Only the pink area activates drag & drop
        key: Key("$i"),
        height: 50.0,
        child: Container(
          color: Colors.grey,
          margin: EdgeInsets.only(left: 50),
          child: TextField(),
        ),
      ));
    }

    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: ReorderableListView(
            children: children,
            onReorder: (oldIndex, newIndex) => null,
          ),
        ),
      ),
    );
  }
}

Answer 1

您需要在那里做很多事情来解决这个问题。

1. 首先通过设置其属性来禁用ReorderableListView中的默认处理程序。buildDefaultDragHandles: false
2. ReorderableDragStartListener像这样将您的子部件包裹在部件内

ReorderableDragStartListener(
   index: i,
   child: Container(
       color: Colors.grey,
       margin: EdgeInsets.only(left: 50),
       child: TextFormField(initialValue: "Child $i", ),
   ),
 ),

3. 然后ReorderableDragStartListener将您的孩子包裹在InkWell里面AbsorbPointer。然后使用FocusNode单击来聚焦内部 TextField。像这样

InkWell(
   onTap: () => _focusNode.requestFocus(),
   onLongPress: () {
                  print("long pressed");
   },
   child: AbsorbPointer(
      child: TextFormField(initialValue: "Child $i", focusNode: _focusNode,),
   ),
),

4. 您需要为列表中的所有项目创建多个 FocusNode。您可以通过使用 List 或简单地在循环内创建一个新的 FocusNode 来完成此操作。

完整的代码示例在这里https://dartpad.dev/?id=e75b493dae1287757c5e1d77a0dc73f1