前言
最近看到一个大佬,写的验证码输入框,感觉挺有意思,说不定未来的某一天就需要用到了呢?本篇文章将记录验证码输入框的封装。
封装验证码输入框
- 自定义一个CustomOtpInput 类,继承自 StatelessWidget
- CustomOtpInput 需要接收 TextEditingController 和 autoFocus 控制
- 设计输入需要展示的样式
- onChanged 文本内容改变之后,需要自动跳转到下一步
基于上面的四点,我们来看一下完整的代码
class CustomOtpInput extends StatelessWidget {
final TextEditingController controller;
final bool autoFocus;
const CustomOtpInput(
{Key? key, required this.controller, required this.autoFocus})
: super(key: key);
Widget build(BuildContext context) {
return SizedBox(
width: 50,
height: 60,
child: TextField(
autofocus: autoFocus,
controller: controller,
// 项目主题色
cursorColor: Theme.of(context).primaryColor,
decoration: const InputDecoration(
border: OutlineInputBorder(),
counterText: '',
),
onChanged: (value) {
if (value.length == 1) {
FocusScope.of(context).nextFocus();
}
},
),
);
}
}
使用方法
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CustomOtpInput(
controller: model.controller1, autoFocus: model.focusBool1),
CustomOtpInput(
controller: model.controller2, autoFocus: model.focusBool2),
CustomOtpInput(
controller: model.controller3, autoFocus: model.focusBool3),
CustomOtpInput(
controller: model.controller4, autoFocus: model.focusBool4),
],
)
运行结果如下
总结
本篇文章的记录就到这里结束了,在使用的时候,当我们输入第一个数字之后,将自动跳转到下一个,一直到最后一个数字的输入,就可以进入验证阶段了。