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

自定义一个CustomOtpInput 类，继承自 StatelessWidget

CustomOtpInput 需要接收 TextEditingController 和 autoFocus 控制

设计输入需要展示的样式

onChanged 文本内容改变之后，需要自动跳转到下一步

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

<br>class CustomOtpInput extends StatelessWidget {<br>  final TextEditingController controller;<br>  final bool autoFocus;<br>  const CustomOtpInput(<br>      {Key? key, required this.controller, required this.autoFocus})<br>      : super(key: key);<br>  @override<br>  Widget build(BuildContext context) {<br>    return SizedBox(<br>      width: 50,<br>      height: 60,<br>      child: TextField(<br>        autofocus: autoFocus,<br>        controller: controller,<br>        // 项目主题色<br>        cursorColor: Theme.of(context).primaryColor,<br>        decoration: const InputDecoration(<br>          border: OutlineInputBorder(),<br>          counterText: '',<br>        ),<br>        onChanged: (value) {<br>          if (value.length == 1) {<br>            FocusScope.of(context).nextFocus();<br>          }<br>        },<br>      ),<br>    );<br>  }<br>}

使用方法

<br>Row(<br>        mainAxisAlignment: MainAxisAlignment.spaceEvenly,<br>        children: [<br>          CustomOtpInput(<br>              controller: model.controller1, autoFocus: model.focusBool1),<br>          CustomOtpInput(<br>              controller: model.controller2, autoFocus: model.focusBool2),<br>          CustomOtpInput(<br>              controller: model.controller3, autoFocus: model.focusBool3),<br>          CustomOtpInput(<br>              controller: model.controller4, autoFocus: model.focusBool4),<br>        ],<br>      )

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