Flutter TextField（文本输入）使用填坑

TextField 是一个文本输入组件，一开始做登录页就用到了。但是，TextField 有一些坑官方还没有填，那么就只能通过一些俏皮的方案来解决了。当然，如果够强的话，也是可以写一个新的 widget 控件的 ~

1、限定了可输入长度，超过长度后的内容虽然不展示出来，但是点击删除键时，还是要删除已输入但是看不见的那部分

2、限定了输入类型（比如数字），虽然会弹出相应类型的键盘（比如数字键盘），但是还是能输入其他类型（比如字母、汉字）

以上两种坑合并解决方案如下，当然，如果想自己画一个数字键盘，也是可以解决输入类型问题 ~

主要是在 TextField 输入后回调 onChanged 方法时，对输入内容进行判断，如果符合判断条件就采用并缓存下来，如果不符合，就通过 TextEditingController 进行“回退”：

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';class WidgetTestPage extends StatefulWidget {WidgetTestPage({Key key, this.title}) : super(key: key);final String title;@overrideState<StatefulWidget> createState() => _WidgetTestPageState();
}class _WidgetTestPageState extends State<WidgetTestPage> {TextEditingController _textFieldController = new TextEditingController();String _phone = "";bool _isNumberAndCount(String str) {return str.length <= 11 && new RegExp("^[0-9][0-9]*\$").hasMatch(str);}@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title,),),body: TextField(keyboardType: TextInputType.number,controller: _textFieldController,decoration: InputDecoration(hintText: "请输入手机号码",hintStyle: TextStyle(color: Color(0xffbfbfbf), fontSize: 16),counterText: "",enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xffebebeb), width: 1),),focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xffebebeb), width: 1),),),onChanged: (v) {if (_isNumberAndCount(v) || v == "") {setState(() {_phone = v;});} else {_textFieldController.text = _phone;_textFieldController.selection = TextSelection.fromPosition(// 保持光标在最后TextPosition(affinity: TextAffinity.downstream, offset: _phone.length),);}},),);}@overridevoid dispose() {super.dispose();}
}

抽取成一个 UI Widget：

NumberTextField(limitCount: 11,controller: TextEditingController(),decoration: InputDecoration(hintText: "请输入手机号码",hintStyle: TextStyle(color: Color(0xffbfbfbf), fontSize: 16),counterText: "",enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xffebebeb), width: 1),),focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xffebebeb), width: 1),),),onChanged: (v) {... ...},
),

import 'package:flutter/material.dart';/// 自定义数字输入框（字母）
/// [limitCount] 限制可输入长度
/// [canInputLetter] 能否输入英文字母
class NumberTextField extends StatefulWidget {final int limitCount;final bool canInputLetter;final TextStyle style;final TextEditingController controller;final InputDecoration decoration;final ValueChanged<String> onChanged;NumberTextField({Key key,this.limitCount = 0,this.canInputLetter = false,this.style,this.controller,this.decoration = const InputDecoration(),this.onChanged,})  : assert(controller != null),super(key: key);@overrideState<StatefulWidget> createState() => _NumberTextFieldState(limitCount, canInputLetter, controller);
}class _NumberTextFieldState extends State<NumberTextField> {final int _limitCount;final bool _canInputLetter;final TextEditingController _textFieldController;String _number = '';_NumberTextFieldState(this._limitCount, this._canInputLetter, this._textFieldController);bool _isNumberAndCount(String str) {return (_limitCount <= 0 || str.length <= _limitCount) &&(_canInputLetter ? RegExp("^[a-z0-9A-Z]*\$").hasMatch(str) : RegExp("^[0-9]*\$").hasMatch(str));}@overrideWidget build(BuildContext context) {return TextField(style: widget.style,keyboardType: TextInputType.number,controller: _textFieldController,decoration: widget.decoration,/*inputFormatters: [FilteringTextInputFormatter.deny(// 过滤表情包，好像_isNumberAndCount已经过滤了，不行才放开RegExp("[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\r\n]"))],*/onChanged: (v) {if (_isNumberAndCount(v) || v == "") {setState(() {_number = v;});if (widget.onChanged != null) {widget.onChanged(v);}} else {_textFieldController.text = _number;_textFieldController.selection = TextSelection.fromPosition(// 保持光标在最后TextPosition(affinity: TextAffinity.downstream, offset: _number.length),);}},);}@overridevoid dispose() {_textFieldController.dispose();super.dispose();}
}

Flutter TextField（文本输入）使用填坑相关推荐

Flutter TextField限制输入仅数字，字母，以及数字键盘，搜索完成设置
import 'package:flutter/material.dart'; import 'package:flutter/services.dart';TextField(inputFormat ...
Flutter升级到1.12填坑指南
最近由于项目需要,需要把flutter升级到stable版本,目前的stable版本是1.12.13的hotfix,而我们项目目前的版本是1.7.3.Google在发布flutter 1.12对And ...
Flutter 从 TextField 安全泄漏问题深入探索文本输入流程
Flutter 的 TextField 相信大家都很熟悉,作为输入控件 TextField 经常出现在需要登录的场景,例如在需要输入密码的 TextField 上配置 obscureText: tru ...
Flutter完整开发实战详解(十七、实用技巧与填坑二)
作为系列文章的第十七篇,本篇再一次带来 Flutter 开发过程中的实用技巧,让你继续弯道超车,全篇均为个人的日常干货总结,以实用填坑为主,让你少走弯路狂飙车. Flutter 完整实战实战系列文章专 ...
泛微oa流程表单之明细表字段通过文本输入内容使另外一个字段必填
//明细表字段通过文本输入内容使另外一个字段必填 jQuery("#detailDiv_0").delegate("input[id^='field10247_']&qu ...
QML 基本文本输入组件TextInput、TextField、TextEdit、TextArea
0.前言 Qt Quick 提供了两个基本的文本输入组件 TextInput 和 TextEdit ,在 Control 模块中提供了以前面两种为基类的 TextField 和 TextArea .其 ...
Flutter中文本输入框TexeFieldr键盘样式TextInputType总结TexeField设置不可编辑
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. TextField 系列文章 TextField的基本使用以及TextField常用属性精讲<点击查看详情> ...
H5填坑笔记--持续更新
最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑-- css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在i ...
flutter TextField 属性详细分析
flutter TextField 属性简单的进行了归纳,有些是仅凭字面翻译. flutter TextField中的InputDecoration属性 TextField({Key key,thi ...
Android Design新控件之TextInputLayout 文本输入布局与自定义颜色简介
Android 从5.0版本开始,新增了Android Materia Design库,让开发者高效的实现炫酷的UI效果推荐: TextInputLayout(文本输入布局) TabLaout(选项 ...

Flutter TextField（文本输入）使用填坑

1、限定了可输入长度，超过长度后的内容虽然不展示出来，但是点击删除键时，还是要删除已输入但是看不见的那部分

2、限定了输入类型（比如数字），虽然会弹出相应类型的键盘（比如数字键盘），但是还是能输入其他类型（比如字母、汉字）

Flutter TextField（文本输入）使用填坑相关推荐

最新文章

热门文章