直播app系統原始碼,flutter 驗證碼輸入框的簡單封裝
阿新 • • 發佈:2022-11-29
直播app系統原始碼,flutter 驗證碼輸入框的簡單封裝
封裝驗證碼輸入框
自定義一個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系統原始碼,flutter 驗證碼輸入框的簡單封裝, 更多內容歡迎關注之後的文章