Flutter中设置number类型键盘时TextFormField的FocusNode失效问题

你代码里的核心问题是在ListView.builder的itemBuilder回调内创建GlobalKey和FocusNode。ListView会复用列表项组件，每次滚动、组件重建时，这些对象都会被重新实例化，导致焦点状态丢失——而数字键盘的系统切换逻辑会放大这个问题，表现为焦点节点彻底失效。

解决步骤 #

1. 将每个列表项对应的GlobalKey<FormState>、FocusNode从itemBuilder中移出，统一在组件的状态层或数据模型中维护，确保每个列表项的状态对象唯一且稳定。
2. 手动管理FocusNode的生命周期，在组件销毁时调用dispose()，避免内存泄漏。

修正后的代码示例 #

class YourTransactionWidget extends StatefulWidget {
  const YourTransactionWidget({super.key});

  @override
  State<YourTransactionWidget> createState() => _YourTransactionWidgetState();
}

class _YourTransactionWidgetState extends State<YourTransactionWidget> {
  // 存储每个列表项的表单密钥和焦点节点
  late List<TransactionFormState> _formStates;

  @override
  void initState() {
    super.initState();
    // 初始化与transactionList对应的状态对象
    final provider = context.read<YourTransactionProvider>();
    _formStates = provider.transactionList.map((_) {
      return TransactionFormState(
        formKey: GlobalKey<FormState>(),
        amountFocus: FocusNode(),
        notesFocus: FocusNode(),
      );
    }).toList();
  }

  @override
  void dispose() {
    // 销毁所有焦点节点，释放资源
    for (final state in _formStates) {
      state.amountFocus.dispose();
      state.notesFocus.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final provider = context.watch<YourTransactionProvider>();

    // 当transactionList长度变化时，同步更新状态列表
    if (_formStates.length != provider.transactionList.length) {
      // 先清理旧节点
      for (final state in _formStates) {
        state.amountFocus.dispose();
        state.notesFocus.dispose();
      }
      // 重新初始化状态列表
      _formStates = provider.transactionList.map((_) {
        return TransactionFormState(
          formKey: GlobalKey<FormState>(),
          amountFocus: FocusNode(),
          notesFocus: FocusNode(),
        );
      }).toList();
    }

    return ListView.builder(
      itemCount: provider.transactionList.length,
      itemBuilder: (context, index) {
        final formState = _formStates[index];
        return Form(
          key: formState.formKey,
          child: Card(
            child: Column(
              children: [
                TextFormField(
                  decoration: const InputDecoration(labelText: "Amount"),
                  focusNode: formState.amountFocus,
                  keyboardType: TextInputType.number,
                ),
                TextFormField(
                  decoration: const InputDecoration(labelText: "Notes"),
                  focusNode: formState.notesFocus,
                  keyboardType: TextInputType.text,
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

// 封装每个列表项的表单状态
class TransactionFormState {
  final GlobalKey<FormState> formKey;
  final FocusNode amountFocus;
  final FocusNode notesFocus;

  TransactionFormState({
    required this.formKey,
    required this.amountFocus,
    required this.notesFocus,
  });
}

额外说明 #

• 数字键盘的焦点问题本质是焦点节点被频繁重建，导致Flutter无法正确跟踪焦点状态。将状态对象移到itemBuilder外管理后，每个列表项的焦点节点始终稳定，就能正常工作。
• 如果你的transactionList会动态增删，一定要同步更新_formStates列表，同时清理旧的焦点节点，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Utpal Gaurav