如何实现Flutter中TextFormField同时自动填充邮箱与密码？

要实现点击邮箱输入框触发自动填充时，同时完成邮箱和密码的填充，核心是将两个TextFormField放入同一个AutofillGroup组件中，让系统识别这是一组关联的登录表单字段。

修改后的代码示例 #

AutofillGroup(
  child: Column(
    children: [
      // 邮箱输入框
      TextFormField(
        autofillHints: [AutofillHints.email],
        decoration: const InputDecoration(labelText: '邮箱'),
      ),
      // 密码输入框
      TextFormField(
        autofillHints: [AutofillHints.password],
        obscureText: true,
        decoration: const InputDecoration(labelText: '密码'),
        onEditingComplete: () => TextInput.finishAutofillContext(),
      ),
    ],
  ),
)

关键说明 #

• AutofillGroup是Flutter提供的用于关联自动填充字段的组件，它会将内部的输入框标记为同一上下文组，当系统触发自动填充时，会一次性填充组内所有匹配的字段。
• 确保两个输入框的autofillHints设置正确：邮箱用AutofillHints.email，密码用AutofillHints.password，这样系统才能准确匹配对应的存储凭证。
• onEditingComplete中的TextInput.finishAutofillContext()可以保留，它会在用户完成编辑后结束自动填充上下文，避免后续不必要的自动填充触发。

额外注意事项 #

• 确认设备已开启系统级的自动填充服务（比如iOS的钥匙串、Android的自动填充服务），并存储了对应的邮箱和密码凭证。
• 如果是自定义的表单样式，确保AutofillGroup包裹了所有需要关联的自动填充字段，不要拆分到不同的组件层级中。

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