Flutter iOS端自动填充后自动聚焦下一个TextField的问题

解决方案1：利用 AutofillGroup 的 onAutofillPerformed 回调 #

AutofillGroup 提供的 onAutofillPerformed 回调会在系统完成自动填充操作时触发，我们可以在这个回调里手动切换焦点到下一个输入框。

实现步骤 #

1. 为每个 TextField 创建独立的 FocusNode
2. 在 AutofillGroup 的 onAutofillPerformed 中，根据当前焦点状态切换到下一个输入框

代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<AutofillForm> createState() => _AutofillFormState();
}

class _AutofillFormState extends State<AutofillForm> {
  final FocusNode _emailFocus = FocusNode();
  final FocusNode _passwordFocus = FocusNode();
  final FocusNode _phoneFocus = FocusNode();

  @override
  void dispose() {
    _emailFocus.dispose();
    _passwordFocus.dispose();
    _phoneFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自动填充表单')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: AutofillGroup(
          onAutofillPerformed: () {
            if (_emailFocus.hasFocus) {
              FocusScope.of(context).requestFocus(_passwordFocus);
            } else if (_passwordFocus.hasFocus) {
              FocusScope.of(context).requestFocus(_phoneFocus);
            }
          },
          child: Column(
            children: [
              TextField(
                focusNode: _emailFocus,
                autofillHints: const [AutofillHints.email],
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(labelText: '邮箱'),
              ),
              TextField(
                focusNode: _passwordFocus,
                autofillHints: const [AutofillHints.password],
                textInputAction: TextInputAction.next,
                obscureText: true,
                decoration: const InputDecoration(labelText: '密码'),
              ),
              TextField(
                focusNode: _phoneFocus,
                autofillHints: const [AutofillHints.telephoneNumber],
                textInputAction: TextInputAction.done,
                decoration: const InputDecoration(labelText: '手机号'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解决方案2：结合 TextEditingController 和 AutofillGroup 交互状态 #

如果方案1无法满足分步骤填充的需求，可以结合 TextEditingController 的文本监听和 AutofillGroup 的 onAutofillInteractive 回调，区分自动填充和手动输入后再切换焦点。

实现步骤 #

1. 标记是否正在进行自动填充交互
2. 监听输入框文本变化，当自动填充导致文本变化时，延迟切换焦点

代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<AutofillForm> createState() => _AutofillFormState();
}

class _AutofillFormState extends State<AutofillForm> {
  final FocusNode _emailFocus = FocusNode();
  final FocusNode _passwordFocus = FocusNode();
  final TextEditingController _emailController = TextEditingController();
  bool _isAutofilling = false;

  @override
  void initState() {
    super.initState();
    _emailController.addListener(() {
      if (_isAutofilling && _emailFocus.hasFocus && _emailController.text.isNotEmpty) {
        Future.delayed(const Duration(milliseconds: 100), () {
          if (mounted && _emailFocus.hasFocus) {
            FocusScope.of(context).requestFocus(_passwordFocus);
          }
        });
        _isAutofilling = false;
      }
    });
  }

  @override
  void dispose() {
    _emailFocus.dispose();
    _passwordFocus.dispose();
    _emailController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自动填充表单')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: AutofillGroup(
          onAutofillInteractive: (isInteractive) {
            _isAutofilling = isInteractive;
          },
          child: Column(
            children: [
              TextField(
                focusNode: _emailFocus,
                controller: _emailController,
                autofillHints: const [AutofillHints.email],
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(labelText: '邮箱'),
              ),
              TextField(
                focusNode: _passwordFocus,
                autofillHints: const [AutofillHints.password],
                textInputAction: TextInputAction.done,
                obscureText: true,
                decoration: const InputDecoration(labelText: '密码'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 确保每个 TextField 配置了正确的 autofillHints，系统才能识别对应的填充类型
• 方案1的 onAutofillPerformed 会在整个 AutofillGroup 的自动填充操作完成时触发，适合单步或整表填充场景
• 方案2的延迟时间可根据实际情况调整，避免因自动填充未完成导致焦点切换失败

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