Flutter自定义OTP组件切换输入框时系统键盘闪烁问题求助
自定义OTP输入框切换时系统键盘闪烁问题
自行构建了自定义OTP界面,测试时切换输入框,系统键盘会出现闪烁现象。尝试了多种解决方案但均无效,且不想使用第三方包。
问题演示

界面代码
build(BuildContext context) { // AppBar height final double appBarHeight = kToolbarHeight; // Default appBar height is 56.0 final double statusBarHeight = MediaQuery.of(context).padding.top; return Scaffold( extendBodyBehindAppBar: true, appBar: AppBar( backgroundColor: Colors.transparent, elevation: 0.0, ), body: Container( width: double.infinity, height: double.infinity, decoration: BoxDecoration( gradient: ThemeController().themeGradient, ), child: Padding( padding: EdgeInsets.only( top: appBarHeight + statusBarHeight, left: 16.0, right: 16.0, bottom: 16.0, ), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'التحقق من الجوال', style: TextStyle( color: Colors.white, fontSize: 24.0, ), ), Text( 'تم إرسال رمز التحقق إلى رقم جوالك الرجاء تحقق من الرسائل', style: TextStyle( color: Colors.white70, fontSize: 16.0, ), textAlign: TextAlign.center, ), const SizedBox(height: 32.0), Directionality( textDirection: TextDirection.ltr, child: Column( children: [ // Pinput( // length: 6, // ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ OTPFieldWidget( controller: textEditingControllerOne, first: true, ), OTPFieldWidget( controller: textEditingControllerTwo, ), OTPFieldWidget( controller: textEditingControllerThree, ), OTPFieldWidget( controller: textEditingControllerFour, ), OTPFieldWidget( controller: textEditingControllerFive, ), OTPFieldWidget( controller: textEditingControllerSix, last: true, ), ], ), ], ), ), const SizedBox(height: 48.0), CustomElevatedButton( onPressed: () => Get.offAllNamed(HomepageScreen.routeName), label: 'تحقق', ), ], ), ), ), );
OTP组件代码
TextField( controller: controller, onTap: () { controller.selection = TextSelection.collapsed(offset: controller.text.length); }, onChanged: (value) { if (value.isNotEmpty && !last) { FocusScope.of(context).nextFocus(); } if (value.isEmpty && !first) FocusScope.of(context).previousFocus(); }, autofocus: autoFocus, textAlign: TextAlign.center, maxLength: 1, keyboardType: TextInputType.number, inputFormatters: [FilteringTextInputFormatter.digitsOnly], style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 24.0, ), cursorHeight: 32.0, decoration: InputDecoration( contentPadding: EdgeInsets.symmetric( vertical: 8.0, ), counterText: '', constraints: BoxConstraints( maxWidth: 48.0, ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide( color: Colors.white, width: 2.0, ), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide( width: 2, color: Colors.white70, ), ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide( width: 2, color: Colors.white70, ), ), errorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide( width: 2, color: Colors.white70, ), ), focusedErrorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide( width: 2, color: Colors.white70, ), ), ), );
感谢您的时间,祝各位编码愉快!
内容的提问来源于stack exchange,提问作者devhasanalhamed
相关产品推荐
相关产品推荐

