Flutter中iOS端4位验证码输入框自动填充失效问题解决

问题描述 #

开发了一个验证码验证页面，采用4个单字符TextField，填充完成一个后自动切换焦点。但在iOS端登录时，收到验证码短信后点击自动填充，仅第一个输入框能填入字符，其余无内容。需要实现验证码按顺序自动填入4个输入框。

验证码输入框界面：

现有代码片段 #

return LayoutBuilder(builder: (context, constraints) {
                          return Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                _buildCodeCell(
                                  tc1,
                                  error,
                                  f1,
                                  next: f2,
                                  previous: null,
                                ),
                                _buildCodeCell(
                                  tc2,
                                  error,
                                  f2,
                                  next: f3,
                                  previous: f1,
                                ),
                                _buildCodeCell(
                                  tc3,
                                  error,
                                  f3,
                                  next: f4,
                                  previous: f2,
                                ),
                                _buildCodeCell(
                                  tc4,
                                  error,
                                  f4,
                                  next: null,
                                  previous: f3,
                                ),
                              ]);
                        });

解决方案 #

1. 添加全局验证码监听控制器 #

创建一个隐藏的TextField控制器，专门接收iOS自动填充的完整验证码，再拆分字符分配到单个输入框：

final fullCodeController = TextEditingController();

@override
void initState() {
  super.initState();
  fullCodeController.addListener(() {
    final code = fullCodeController.text;
    if (code.length >= 4) {
      tc1.text = code[0];
      tc2.text = code[1];
      tc3.text = code[2];
      tc4.text = code[3];
      FocusScope.of(context).unfocus();
    }
  });
}

// 在页面布局中添加隐藏的输入框
Opacity(
  opacity: 0,
  child: TextField(
    controller: fullCodeController,
    keyboardType: TextInputType.number,
    autocorrect: false,
    enableSuggestions: false,
    decoration: const InputDecoration(border: InputBorder.none),
  ),
)

2. 配置单个输入框的自动填充属性 #

在_buildCodeCell方法中，为每个输入框添加验证码自动填充标识，让iOS识别输入项类型：

TextField _buildCodeCell(TextEditingController controller, bool error, FocusNode focusNode, {FocusNode? next, FocusNode? previous}) {
  return TextField(
    controller: controller,
    focusNode: focusNode,
    maxLength: 1,
    keyboardType: TextInputType.number,
    autocorrect: false,
    enableSuggestions: false,
    autofillHints: const [AutofillHints.oneTimeCode], // 关键配置
    decoration: InputDecoration(
      counterText: '',
      errorText: error ? '验证码错误' : null,
    ),
    onChanged: (value) {
      if (value.isNotEmpty && next != null) {
        FocusScope.of(context).requestFocus(next);
      } else if (value.isEmpty && previous != null) {
        FocusScope.of(context).requestFocus(previous);
      }
    },
  );
}

3. 适配iOS自动填充逻辑 #

iOS的验证码自动填充会优先将完整内容填入带有AutofillHints.oneTimeCode的输入框，隐藏的全局控制器会捕获完整验证码，再拆分到单个输入框，规避单输入框只能容纳单个字符的限制，同时保留手动输入时的焦点切换逻辑。

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