Flutter：在onFieldSubmitted中切换TextFormField焦点

嘿，我明白你想在AlertDialog里的多个TextFormField之间实现提交（比如按回车）后自动把焦点移到下一个输入框的需求，这在表单输入场景里特别实用。下面我给你一套完整的实现方案，直接就能用：

首先，我们需要给每个TextFormField绑定一个FocusNode，然后通过设置TextInputAction和onFieldSubmitted回调来控制焦点切换。另外要记得在State销毁时释放FocusNode，避免内存泄漏。

完整代码示例：

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainScreen()
    );
  }
}

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  // 为每个输入框创建独立的FocusNode
  late FocusNode _firstFocusNode;
  late FocusNode _secondFocusNode;
  late FocusNode _thirdFocusNode;

  // 表单全局Key，用于验证
  final _formKey = GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
    _firstFocusNode = FocusNode();
    _secondFocusNode = FocusNode();
    _thirdFocusNode = FocusNode();
  }

  @override
  void dispose() {
    // 销毁页面时释放FocusNode，防止内存泄漏
    _firstFocusNode.dispose();
    _secondFocusNode.dispose();
    _thirdFocusNode.dispose();
    super.dispose();
  }

  void _showInputDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('多输入框焦点切换'),
          content: Form(
            key: _formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextFormField(
                  focusNode: _firstFocusNode,
                  decoration: InputDecoration(labelText: '第一个输入框'),
                  textInputAction: TextInputAction.next, // 键盘显示"下一步"按钮
                  onFieldSubmitted: (value) {
                    // 提交后切换焦点到第二个输入框
                    FocusScope.of(context).requestFocus(_secondFocusNode);
                  },
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return '请输入内容';
                    }
                    return null;
                  },
                ),
                TextFormField(
                  focusNode: _secondFocusNode,
                  decoration: InputDecoration(labelText: '第二个输入框'),
                  textInputAction: TextInputAction.next,
                  onFieldSubmitted: (value) {
                    FocusScope.of(context).requestFocus(_thirdFocusNode);
                  },
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return '请输入内容';
                    }
                    return null;
                  },
                ),
                TextFormField(
                  focusNode: _thirdFocusNode,
                  decoration: InputDecoration(labelText: '第三个输入框'),
                  textInputAction: TextInputAction.done, // 最后一个输入框显示"完成"按钮
                  onFieldSubmitted: (value) {
                    // 完成输入后验证表单并关闭弹窗
                    if (_formKey.currentState!.validate()) {
                      Navigator.of(context).pop();
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('表单提交成功！')),
                      );
                    }
                  },
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return '请输入内容';
                    }
                    return null;
                  },
                ),
              ],
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('取消'),
            ),
            TextButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  Navigator.of(context).pop();
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('表单提交成功！')),
                  );
                }
              },
              child: Text('提交'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('焦点切换示例')),
      body: Center(
        child: ElevatedButton(
          onPressed: _showInputDialog,
          child: Text('打开输入弹窗'),
        ),
      ),
    );
  }
}

关键实现细节： #

• FocusNode管理：每个输入框对应独立的FocusNode，用来精准控制焦点的获取与释放，必须在dispose方法中销毁，避免内存泄漏。
• TextInputAction配置：前两个输入框设为TextInputAction.next，让键盘按钮显示为“下一步”；最后一个设为TextInputAction.done，符合用户完成输入的操作预期。
• onFieldSubmitted回调：在这个回调里通过FocusScope.of(context).requestFocus()方法，将焦点主动切换到下一个输入框的FocusNode，实现自动跳转。
• 表单验证逻辑：结合Form组件和全局Key，统一处理所有输入框的验证，不管是按回车提交还是点击弹窗的提交按钮，都能触发相同的验证逻辑。

这样实现后，用户在第一个输入框按回车，焦点会自动跳到第二个；第二个按回车跳到第三个；第三个按回车则会验证表单并关闭弹窗，完全满足你的需求！

内容的提问来源于stack exchange，提问作者Ian Cruz