flutter - 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,
);
我该如何解决?
解决方案
检查这个逻辑,你可以为我相信的那些 ui 设置样式。
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());
}
},
),
),
],
);
}
}
推荐阅读
- python - Linked List Class __str__ function
- javascript - How to add an element in the your index inside a array? ReactJs
- android - In-App-Billing V3 库的“onActivityResult”中的 NullPointerException
- android - Cannot find symbol DataBindingComponent on Android Studio 3.2 Canary 16 Kotlin project
- subset-sum - SSP算法长度为k的最小子集
- github - Github API 获取文件中的评论
- javascript - How can I add data-cookieconsent="statistics" to script tag?
- c++ - 为什么变量算术不起作用?
- python - 金字塔在哪里存储 auth_tkt 会话 cookie
- makefile - Makefile same target different inputs