如何解决 Flutter 中 OTP 输入中焦点向后的问题

我假设您正在使用多个文本字段来记录 otp 的每个字符，问题是由于每个 otp 输入框都是空的，退格键不会删除任何内容，因此不会触发onChanged

为了检测退格键，您可以在每个输入中初始化一个字符，以便退格键将删除它并触发onChanged，在我的情况下，我使用了一个零宽度字符'\u200b'，因此用户看不到它

例子：

class OtpInputWidget extends StatefulWidget {
  final TextEditingController otpController;

  const OtpInputWidget({super.key, required this.otpController});

  @override
  State<OtpInputWidget> createState() => _OtpInputWidgetState();
}

class _OtpInputWidgetState extends State<OtpInputWidget> {
  final focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // OnKeyEvent won't work because you can't detect a delete action in an empty text field
    // https://medium.com/super-declarative/why-you-cant-detect-a-delete-action-in-an-empty-flutter-text-field-3cf53e47b631
    focusNode.addListener(() {
      // On focusing on the text field, add a zero-width character at the front of text.
      // This enables the detection of delete actions in an "empty" text field.
      if (focusNode.hasFocus) {
        if (widget.otpController.text.isEmpty) {
          widget.otpController.text = '\u200b';
        } else {
          // This enables any changes to the text field value (whether the new value is
          // the same as or different from the old value) to trigger the OnChange event.
          final pin =
              widget.otpController.text.replaceAll('\u200b', '');
          widget.otpController.text = '\u200b$pin';
        }
        _selectAllText();
      }
    });
  }

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

在上面的代码中，otpInputWidget 是单独的输入框，我用 focusNode 监听器对其进行初始化，当其为空时添加一个零宽度字符，如果之前已被删除则将其添加回来。

此外，由于输入框现在有一个字符，我们不想向输入中添加字符，而是想用新字符覆盖现有字符，通过选择文本，输入将覆盖它，这就是为什么我在侦听器中有一个_selectAllText()来选择输入的文本（只要它聚焦）

_selectAllText() 的定义：

void _selectAllText() {
  widget.otpController.selection = TextSelection(
    baseOffset: 0, 
    extentOffset: widget.otpController.value.text.length
   );
      }

并在文本字段中切换焦点：

onChanged: (value) {
        if (value.isNotEmpty) {
          FocusScope.of(context).nextFocus();
        } else {
          FocusScope.of(context).previousFocus();
        }
      },
      onTap: () => _selectAllText(),

*在将最终的完整 OTP 发送去验证之前，您应该记得对其进行清理，删除多余的零宽度字符：

otpInput.replaceAll('\u200b', ''),

以下是完整代码：

class OtpInputWidget extends StatefulWidget {
  final TextEditingController otpController;

  const OtpInputWidget({super.key, required this.otpController});

  @override
  State<OtpInputWidget> createState() => _OtpInputWidgetState();
}

class _OtpInputWidgetState extends State<OtpInputWidget> {
  final focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // OnKeyEvent won't work because you can't detect a delete action in an empty text field
    // https://medium.com/super-declarative/why-you-cant-detect-a-delete-action-in-an-empty-flutter-text-field-3cf53e47b631
    focusNode.addListener(() {
      // On focusing on the text field, add a zero-width character at the front of text.
      // This enables the detection of delete actions in an "empty" text field.
      if (focusNode.hasFocus) {
        if (widget.otpController.text.isEmpty) {
          widget.otpController.text = '\u200b';
        } else {
          // This enables any changes to the text field value (whether the new value is
          // the same as or different from the old value) to trigger the OnChange event.
          final pin =
              widget.otpController.text.replaceAll('\u200b', '');
          widget.otpController.text = '\u200b$pin';
        }
        _selectAllText();
      }
    });
  }

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.sizeOf(context).width;

    final otpTextField = TextField(
      textAlign: TextAlign.center,
      keyboardType: TextInputType.number,
      controller: widget.otpController,
      focusNode: focusNode,
      maxLength: 1,
      decoration: InputDecoration(
          isDense: true,
          counterText: '',
          filled: true,
          fillColor: customColors.emailInputContainer,
          border: outlineInputBorderless),
      onChanged: (value) {
        if (value.isNotEmpty) {
          FocusScope.of(context).nextFocus();
        } else {
          FocusScope.of(context).previousFocus();
        }
      },
      onTap: () => _selectAllText(),
    );

    return SizedBox(width: screenWidth * 0.095, child: otpTextField);
  }

  void _selectAllText() {
    widget.otpController.selection = TextSelection(
        baseOffset: 0, extentOffset: widget.otpController.value.text.length);
  }
}