加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

Flutter 开发中的一些 Tips

发布时间:2019-06-21 21:46:36 所属栏目:业界 来源:唯鹿lv-2
导读:学习Flutter也有一阵子了。闲着没事,用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了,所以都是些死数据,实现效果可以说是很完美了(得到了设计的认可。。。)。当然自己也是边查边写,也借鉴了许多Github上优秀的Flutter项目。现在开源出

比较成熟有效的方案是在键盘弹出的上方悬浮一个按钮,点击可以关闭键盘。当然了,这种问题也有对应的库可以解决,我使用的是flutter_keyboard_actions来解决了这个问题。因为在Android端我发现了部分输入法的兼容问题,所以只针对IOS做了处理。大家可以看一下前后对比图,具体实现代码可以参考flutter_keyboard_actions的文档和我的项目代码:

Flutter 开发中的一些 Tips

Flutter 开发中的一些 Tips

当然平台差异不仅仅是这么多,比如IOS自带侧滑返回等。具体我们可以去查看调用TargetPlatform枚举类的代码。

如果你觉得这样真麻烦,我给你支个大招,修改ThemeData的platform,指定一个平台。

  1. class MyApp extends StatelessWidget { 
  2.    
  3.   @override 
  4.   Widget build(BuildContext context) { 
  5.      
  6.     return MaterialApp( 
  7.       theme: ThemeData( 
  8.         platform: TargetPlatform.android 
  9.       ), 
  10.       ... 
  11.     ); 
  12.   } 

其次就是使用TextInputType.number在IOS中弹起的键盘没有小数点符号。在输入金额类型数据时,需要将keyboardType属性设置为TextInputType.numberWithOptions(decimal: true)。

6.keyboardType

keyboardType属性主要含义为弹起的键盘类型,并不代表输入数据的类型。

而在Android开发中,在EditText中设置android:inputType不仅可以指定弹起的键盘类型,同时也确定了输入数据的类型,也就是内置了数据的格式校验。Flutter中并没有后者,所以可能一开始你是TextInputType.number,但是在输入法中切换成中文键盘,一样可以输入中文字符。所以数据的校验需要我们使用inputFormatters自己处理。

比如TextInputType.phone时可以使用WhitelistingTextInputFormatter 白名单校验,只允许输入0~9:

  1. TextField( 
  2.       keyboardType: TextInputType.phone, 
  3.       inputFormatters: [WhitelistingTextInputFormatter(RegExp("[0-9]"))] 
  4.     ) 

输入密码时可以使用BlacklistingTextInputFormatter 黑名单校验,除去中文字符:

  1. TextField( 
  2.       keyboardType: TextInputType.text, 
  3.       inputFormatters: [BlacklistingTextInputFormatter(RegExp("[u4e00-u9fa5]"))] 
  4.     ) 

输入小数时,可以自定义TextInputFormatter来限制输入小数格式:

  1. TextField( 
  2.       keyboardType: TextInputType.numberWithOptions(decimal: true), 
  3.       inputFormatters: [UsNumberTextInputFormatter()] 
  4.     ) 
  5. //来源:https://www.cnblogs.com/yangyxd/p/9639588.html 
  6. class UsNumberTextInputFormatter extends TextInputFormatter { 
  7.   static const defaultDouble = 0.001; 
  8.   static double strToFloat(String str, [double defaultValue = defaultDouble]) { 
  9.     try { 
  10.       return double.parse(str); 
  11.     } catch (e) { 
  12.       return defaultValue; 
  13.     } 
  14.   } 
  15.   @override 
  16.   TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) { 
  17.     String value = newValue.text; 
  18.     int selectionIndex = newValue.selection.end; 
  19.     if (value == ".") { 
  20.       value = "0."; 
  21.       selectionIndex++; 
  22.     } else if (value != "" && value != defaultDouble.toString() && strToFloat(value, defaultDouble) == defaultDouble) { 
  23.       value = oldValue.text; 
  24.       selectionIndex = oldValue.selection.end; 
  25.     } 
  26.     return new TextEditingValue( 
  27.       text: value, 
  28.       selection: new TextSelection.collapsed(offset: selectionIndex), 
  29.     ); 
  30.   } 

7.InkWell

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读