Flutter - TextField 不会自动聚焦到下一个 TextField

Question

想象一下 OTP SMS 验证码。我从自定义文本字段构建了这个

看起来像这样

我将焦点节点附加到每个文本字段。

这个想法是，每次您在其中一个文本字段中输入数字时，焦点节点都会自动聚焦到下一个文本字段

每次您输入数字时，该文本字段的选择都会被选中，如您在图像上所见

问题是：如果我选择“1”文本字段并再次输入“1”，它不会自动聚焦到“2”文本字段。它只是删除这样的选择

因此，如果您键入与所选内容突出显示的相同字符，它只会删除所选内容。但是如果你输入任何其他字符，它就会自动聚焦到下一个输入字段

在我的文本字段中，这是我处理自动对焦的方式：

onChanged: (String value) {
  if (value.isEmpty) {
    FocusScope.of(context).requestFocus(previousFocusNode);
  } else {
    FocusScope.of(context).requestFocus(nextFocusNode);
  }
},

这就是我在文本字段被选中时处理自动选择的方式：

controller.selection = TextSelection(
  baseOffset: 0,
  extentOffset: controller.text.length,
);

我该如何解决这个问题？

Answer 1

检查这个逻辑，你可以设计那些我相信的用户界面。

import 'package:flutter/material.dart';

class AutoFocusChangeOnSameChar extends StatefulWidget {
  AutoFocusChangeOnSameChar({Key? key}) : super(key: key);

  @override
  _AutoFocusChangeOnSameCharState createState() =>
      _AutoFocusChangeOnSameCharState();
}

class _AutoFocusChangeOnSameCharState extends State<AutoFocusChangeOnSameChar> {
  late FocusNode text1, text2, text3;

  @override
  void initState() {
    super.initState();
    text1 = FocusNode();
    text2 = FocusNode();
    text3 = FocusNode();
  }

  @override
  void dispose() {
    text1.dispose();
    text2.dispose();
    text3.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
          width: 30,
          child: TextField(
            focusNode: text1,
            onChanged: (value) {
              if (value.length > 0) {
                FocusScope.of(context).requestFocus(text2);
              }
            },
          ),
        ),
        SizedBox(
          width: 30,
        ),
        SizedBox(
          width: 30,
          child: TextField(
            focusNode: text2,
            onChanged: (value) {
              if (value.length > 0) {
                FocusScope.of(context).requestFocus(text3);
              }
            },
          ),
        ),
        SizedBox(
          width: 30,
        ),
        SizedBox(
          width: 30,
          child: TextField(
            focusNode: text3,
            onChanged: (value) {
              if (value.length > 0) {
                FocusScope.of(context).requestFocus(new FocusNode());
              }
            },
          ),
        ),
      ],
    );
  }
}