flutter 验证码输入框的简单封装

---

前言

最近看到一个大佬，写的验证码输入框，感觉挺有意思，说不定未来的某一天就需要用到了呢？本篇文章将记录验证码输入框的封装。

---

封装验证码输入框

1. 自定义一个CustomOtpInput 类，继承自 StatelessWidget
2. CustomOtpInput 需要接收 TextEditingController 和 autoFocus 控制
3. 设计输入需要展示的样式
4. onChanged 文本内容改变之后，需要自动跳转到下一步

基于上面的四点，我们来看一下完整的代码

class CustomOtpInput extends StatelessWidget {
    
    
  final TextEditingController controller;
  final bool autoFocus;

  const CustomOtpInput(
      {
    
    Key? key, required this.controller, required this.autoFocus})
      : super(key: key);

  @override
  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),
        ],
      )

运行结果如下

---

总结

本篇文章的记录就到这里结束了，在使用的时候，当我们输入第一个数字之后，将自动跳转到下一个，一直到最后一个数字的输入，就可以进入验证阶段了。