直播app开发搭建，封装验证码输入框

直播app开发搭建，封装验证码输入框

自定义一个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);
  @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),
        ],
      )

 以上就是直播app开发搭建，封装验证码输入框， 更多内容欢迎关注之后的文章