如何解决Flutter - TextField 不会自动聚焦到下一个 TextField
想象一下 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,);
我该如何解决这个问题?
解决方法
检查这个逻辑,你可以设计那些我相信的用户界面。
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,child: TextField(
focusNode: text2,onChanged: (value) {
if (value.length > 0) {
FocusScope.of(context).requestFocus(text3);
}
},child: TextField(
focusNode: text3,onChanged: (value) {
if (value.length > 0) {
FocusScope.of(context).requestFocus(new FocusNode());
}
},],);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。