安卓中 Flutter 输入框拖拽导致崩溃的解法

205 字
1 分钟
安卓中 Flutter 输入框拖拽导致崩溃的解法

问题原因#

这种问题通常是因为在 ReorderableListView 中使用 TextField 时,拖拽操作会触发 TextField 的焦点变化,从而导致 Flutter 的渲染引擎在处理焦点变化时出现异常,最终导致应用崩溃。

解决方案#

  1. ReorderableListView 中,将 buildDefaultDragHandles 设置为 false,避免长按触发拖拽。
  2. 自定义拖拽手柄 ReorderableDragStartListener,只在特定区域触发拖拽。
  3. 在拖拽代理之前清除焦点,调用 FocusManager.instance.primaryFocus?.unfocus();
return Listener(
onPointerDown: (_) {
// 清除焦点,避免拖拽时触发 TextField 的焦点变化
FocusManager.instance.primaryFocus?.unfocus();
},
child: ReorderableListView(
buildDefaultDragHandles: false,
children: items.map((item) {
return ListTile(
key: ValueKey(item),
title: TextField(
controller: TextEditingController(text: item),
),
// 自定义拖拽手柄,点击时可清除焦点
trailing: ReorderableDragStartListener(
index: items.indexOf(item),
child: Icon(Icons.drag_handle),
),
);
}).toList(),
onReorder: (oldIndex, newIndex) {
setState(() {
if (newIndex > oldIndex) newIndex -= 1;
final item = items.removeAt(oldIndex);
items.insert(newIndex, item);
});
},
),
);

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

安卓中 Flutter 输入框拖拽导致崩溃的解法
https://ariyara.cc/posts/flutter/textfield-crash-on-drag/
作者
FnxAg
发布于
2026-07-31
许可协议
CC BY-NC-SA 4.0