Flutter（18）：Material组件之TextField

Flutter教学目录持续更新中

Github源代码持续更新中

1.TextField简介

输入框，这个组件的属性非常的多

2.TextField属性

  • controller：文本控制器
  • focusNode：获取键盘焦点
  • decoration：InputDecoration 边框装饰
  • inputType：keyboardType 键盘类型
  • textInputAction：键盘的操作按钮类型
  • textCapitalization：TextCapitalization.none 配置大小写键盘
  • style：输入文本样式
  • textAlign：TextAlign.start 对齐方式
  • textDirection：文本方向
  • readOnly：只读
  • showCursor：显示光标
  • autofocus = false：是否自动对焦
  • obscureText = false：是否隐藏内容，例如密码格式
  • obscuringCharacter：隐藏格式
  • autocorrect = true：是否自动校正
  • maxLines = 1：最大行数
  • minLines：最小行数
  • maxLength：允许输入的最大长度
  • maxLengthEnforced = true：是否允许超过输入最大长度
  • onChanged：文本内容变更时回调
  • onEditingComplete：提交内容时回调
  • onSubmitted：用户提示完成时回调
  • inputFormatters：验证及格式
  • enabled：是否不可点击
  • cursorWidth = 2.0：光标宽度
  • cursorRadius：光标圆角弧度
  • cursorColor：光标颜色
  • keyboardAppearance：键盘亮度,仅限于 iOS 设备
  • scrollPadding：EdgeInsets.all(20.0) 滚动到视图中时，填充边距
  • enableInteractiveSelection：长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
  • onTap：点击时回调
  • scrollController：滑动控制器
  • scrollPhysics：滑动样式

3.InputDecoration属性

  • icon：输入框最前面的widget
  • labelText：悬浮提示文本
  • labelStyle：悬浮提示文本样式
  • helperText：帮助文本
  • helperStyle：帮助文本样式
  • helperMaxLines：帮助文本最大行数
  • hintText：提示文本
  • hintStyle：提示文本样式
  • hintMaxLines：提示文本最大行数
  • errorText：报错文本
  • errorStyle：报错文本样式
  • errorMaxLines：报错文本最大行数
  • isCollapsed：false，是否折叠
  • contentPadding：内边距
  • prefixIcon：前缀widget
  • prefixIconConstraints：prefixIcon约束
  • prefix：前缀widget，相当于自定义前缀widget,整体替换prefixIcon，prefixText（不可跟prefixIcon，prefixText同时使用）
  • prefixText：前缀文本
  • prefixStyle：前缀文本样式
  • suffixIcon：后缀widget
  • suffix：后缀widget，相当于自定义后缀widget,整体替换suffixText，suffixIcon（不可跟suffixText，suffixIcon同时使用）
  • suffixText：后缀文本
  • suffixStyle：后缀文本样式
  • suffixIconConstraints：suffixIcon约束
  • counter：counter widget（在组件右下方，可以自定义功能，不只是计数使用）
  • counterText：counter文本
  • counterStyle：counter文本样式
  • filled：输入框颜色是否填充
  • fillColor：输入框填充色
  • errorBorder：错误边框
  • focusedBorder：获取光标时边框
  • focusedErrorBorder：获取光标时错误边框
  • disabledBorder：不可用时边框
  • enabledBorder：可用时边框
  • border：边框
  • enabled：true，是否可用
  • alignLabelWithHint：label是否对齐hint

我们先来看TextField

4.光标相关属性

cursorColor 为光标颜色，cursorWidth 为光标宽度，cursorRadius 为光标圆角


1601016367508.jpg
cursorColor: Colors.amber,
cursorWidth: 20,
cursorRadius: Radius.circular(5),

5. 文本长度

maxLength 为字符长度，且右下角有编辑长度与整体长度对比；与 maxLengthEnforced 配合，maxLengthEnforced 为 true 时达到最大字符长度后不可编辑；为 false 时可继续编辑展示有差别；


maxLengthEnforced=true.jpg

maxLengthEnforced=false.jpg
 maxLength: 10,
maxLengthEnforced: false,

那如果需要设置最大长度又不想有长度计数怎么办


1601017540510.jpg
  maxLength: null,
  inputFormatters: [LengthLimitingTextInputFormatter(10)],

6. inputFormatters输入过滤

  • LengthLimitingTextInputFormatter 限制最长字符；
  • WhitelistingTextInputFormatter 白名单 （这个官方也准备废弃，推荐FilteringTextInputFormatter.allow）
  • BlacklistingTextInputFormatter 黑名单（已经过时，推荐FilteringTextInputFormatter.deny）
  • FilteringTextInputFormatter
    例如不允许输入数字（只允许就是allow）
FilteringTextInputFormatter.deny(RegExp(r'\d+'))

7.监听事件以及控制器

onChanged: (text)内容改变的时候触发，返回输入框中的内容
onSubmitted: (text)回车触发，返回输入框中的内容
onEditingComplete：回车触发，无参数返回，一般情况跟onSubmitted一起触发
TextEditingController：控制器也可以添加监听事件，但是这个监听是触发不比较混乱，不推荐用，还有页面结束需要释放。但是TextEditingController可以用来获取输入框内容，清除输入框内容，给输入框赋值初始内容等操作。

8.软键盘弹出遮挡输入框的问题

使用滑动页面如：ListView，如果不是滑动页面在Scaffold中可以使用resizeToAvoidBottomInset: true（resizeToAvoidBottomPadding也一样，但是已经过时）


1601192405078.jpg

9.输入框行数

maxLines，minLines
如果只设置maxLines那么输入框行数= maxLines，如果也设置了minLines那么在没有内容的情况下输入框行数= minLines，随内容增加而增高至maxLines


1601192845369.jpg

1601192873650.jpg
 maxLines: 5,
 minLines: 2,

10.keyboardType，textInputAction

keyboardType：TextInputType 设置软键盘弹出类型（如text，number，phone等）
textInputAction：TextInputAction 软键盘操作按钮类型（如search，send等）

11.密码框设置

启用加密文字样式输入框行数只能是1，可以自定义加密文字的显示样式


1601193251451.jpg
obscureText: false,
obscuringCharacter: '#',

12.展开样式的输入框

这个情况下父节点必须是一个可以知道高度的组件，也就是说不能是可滑动组件，比如使用Container包裹；最大行数最小行数需要为null，同理也就不可以设置obscureText: true


1601193644309.jpg
Container(
  height: 200,
  padding: EdgeInsets.all(10),
  child: TextField(
    maxLines: null,
    minLines: null,
    expands: true,
  )
)

下面来看看InputDecoration的属性

13.icon

可以在输入框前面添加一个widget


1601193925385.jpg
icon: Icon(
        Icons.home,
        size: 40,
      ),

14.hint

提示文本


1601194111561.jpg
  _textStyle(Color color) {
    return TextStyle(
      color: color,
      fontSize: 14,
      fontWeight: FontWeight.bold,
    );
  }

hintText: 'hintText',
hintMaxLines: 1,
hintStyle: _textStyle(Colors.grey),

15.悬浮提示文本

这个无焦点时显示在输入框内，有焦点就会悬浮在上方


1601194197255.jpg

1601194215120.jpg
labelText: 'labelText',
alignLabelWithHint: false,
labelStyle: _textStyle(Colors.black),

16.帮助文本

1601194380316.jpg
helperText: 'helperText',
helperMaxLines: 1,
helperStyle: _textStyle(Colors.black),

17.报错文本

当errorText有值的时候会覆盖helperText，errorText: null那么helperText会重现显示


1601194561544.jpg
errorText: 'errorText',
errorMaxLines: 1,
errorStyle: _textStyle(Colors.red),

18.输入框填充色

1601194634729.jpg
fillColor: Colors.amber.shade100,
filled: true,

19.前缀

prefix：前缀widget，相当于自定义前缀widget,整体替换prefixIcon，prefixText（不可跟prefixIcon，prefixText同时使用）


1601194771654.jpg
// prefix: ,
prefixIcon: Icon(
  Icons.account_circle,
  size: 40,
),
prefixText: 'prefixText：',
prefixStyle: _textStyle(Colors.black),
prefixIconConstraints: BoxConstraints.expand(width: 40, height: 40),

20.后缀

suffix：后缀widget，相当于自定义后缀widget,整体替换suffixText，suffixIcon（不可跟suffixText，suffixIcon同时使用）


1601194880870.jpg
// suffix: ,
// suffixIcon: Icon(
//   Icons.account_box,
//   size: 40,
// ),
suffixIcon: Image.asset('images/scan.png'),
suffixText: 'suffixText',
suffixStyle: _textStyle(Colors.black),
suffixIconConstraints: BoxConstraints.expand(width: 40, height: 40),

21.counter

1601194984687.jpg
// counter: ,
counterText: 'counterText',
counterStyle: _textStyle(Colors.black),

22.border

border属性下BorderSide的属性是无效的，能起效果的只有borderRadius

OutlineInputBorder
1601195580733.jpg
 _myOutlineInputBorder(Color color) {
    return OutlineInputBorder(
      borderSide: BorderSide(
        color: color,
        style: BorderStyle.solid,
      ),
      borderRadius: BorderRadius.circular(20),
    );
  }

border: _myOutlineInputBorder(Colors.black),
UnderlineInputBorder
1601195649761.jpg
_myUnderlineInputBorder(Color color) {
    return UnderlineInputBorder(
      borderSide: BorderSide(
        color: color,
        style: BorderStyle.solid,
      ),
      borderRadius: BorderRadius.circular(20),
    );
  }

border: _myUnderlineInputBorder(Colors.black),

23.disabledBorder/enabledBorder

这两个是配置enabled所对应的边框样式，这个是初始化未接受焦点时候的边框样式


enabled: true.jpg

enabled: false.jpg
enabled: false,

disabledBorder: _myOutlineInputBorder(Colors.deepPurple),
enabledBorder: _myOutlineInputBorder(Colors.blue),

_myOutlineInputBorder(Color color) {
    return OutlineInputBorder(
      borderSide: BorderSide(
        color: color,
        style: BorderStyle.solid,
        width: 5,
      ),
      borderRadius: BorderRadius.circular(20),
    );
  }

24.errorBorder/focusedBorder/focusedErrorBorder

errorBorder.jpg
focusedBorder.jpg
focusedErrorBorder.jpg
 errorBorder: _myOutlineInputBorder(Colors.red),
 focusedBorder: _myOutlineInputBorder(Colors.amber),
 focusedErrorBorder: _myOutlineInputBorder(Colors.green),

下一节：Material组件之Checkbox/CheckboxListTile

Flutter（19）：Material组件之Checkbox/CheckboxListTile

Flutter教学目录持续更新中

Github源代码持续更新中

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 196,099评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,473评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,229评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,570评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,427评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,335评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,737评论 3赞 386
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,392评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,693评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,349评论 3赞 314
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,750评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2赞 335