直播软件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开发,验证码输入框的简单封装,更多内容欢迎关注之后的文章
标签:model,app,验证码,输入框,controller,autoFocus,CustomOtpInput From: https://www.cnblogs.com/yunbaomengnan/p/16941291.html