Flutter组件学习（三）—— 输入框TextFiled

序言
Google 前两天发布了 Flutter 1.0 正式版本，正式版发布之后，LZ身边越来越多的人都开始入坑了，不得不说 Flutter 框架的魅力还是很吸引人的哈，所以我们更要抓紧学习了；之前我写了两篇文章来介绍 Flutter中的Text组件 和 Flutter中的Image组件，今天我们继续学习输入框 TextFiled 组件，话不多说，先上图：

TextFiled组件的API
先来看一下TextFiled的构造方法：

 1const TextField({ 2 Key key, 3 this.controller, 4 this.focusNode, 5 this.decoration = const InputDecoration(), 6 TextInputType keyboardType, 7 this.textInputAction, 8 this.textCapitalization = TextCapitalization.none, 9 this.style, 10 this.textAlign = TextAlign.start, //类似Text组件 11 this.textDirection, //类似Text组件 12 this.autofocus = false, 13 this.obscureText = false, 14 this.autocorrect = true, 15 this.maxLines = 1, 16 this.maxLength, 17 this.maxLengthEnforced = true, 18 this.onChanged, 19 this.onEditingComplete, 20 this.onSubmitted, 21 this.inputFormatters, 22 this.enabled, 23 this.cursorWidth = 2.0, 24 this.cursorRadius, 25 this.cursorColor, 26 this.keyboardAppearance, 27 this.scrollPadding = const EdgeInsets.all(20.0), 28 this.enableInteractiveSelection = true, 29 this.onTap, 30})

哇，乍一看好多配置啊，别急大兄弟，有很多我们在讲 Text 组件的时候已经讲过的，接下来我们一个一个来看这些属性：

1、controller

根据字面意思我们就可以知道，这是一个控制器，毫无疑问当然是控制 TextField 组件的了，用处有很多，可以监听输入框的输入（通过controller.addListener()），可以获取输入框的值，可以设置输入框的值等等。

 1TextEditingController _textEditingController = new TextEditingController(); 2 3new TextField( 4 controller: _textEditingController, 5), 6new RaisedButton( 7 onPressed: () { 8 print(_textEditingController.text); 9 _textEditingController.clear(); 10 }, 11 child: Text('清除'), 12)

2、focusNode

这个属性可以用来监听输入框是否获取（失去）焦点：

 1FocusNode _focusNode = new FocusNode(); 2 3@override 4void initState() { 5 super.initState(); 6 _focusNode.addListener(_focusNodeListener); 7} 8 9Future<Null> _focusNodeListener() async { 10 if (_focusNode.hasFocus) { 11 print('获取焦点'); 12 } else { 13 print('失去焦点'); 14 } 15} 16 17new TextField( 18 focusNode: _focusNode, 19)

3、decoration

这个属性用来设置输入框的一些样式，比如前后图标，提示文字，错误文字，占位文字等等，下面来看一下可以设置的东西（有点多，大家可以有需要的时候再去挨个了解）：

 1const InputDecoration({ 2 this.icon, //输入框前面的图片（在下划线外面） 3 this.labelText, //顶部提示文字（获取焦点之后会移动到输入框上方） 4 this.labelStyle, 5 this.helperText, //底部提示文字（不会移动） 6 this.helperStyle, 7 this.hintText, //占位文字 8 this.hintStyle, 9 this.errorText, //类似helperText 10 this.errorStyle, 11 this.errorMaxLines, 12 this.hasFloatingPlaceholder = true, 13 this.isDense, 14 this.contentPadding, //输入内容的边距，默认有一个边距，可以手动设置 15 this.prefixIcon, //输入框前面的图片（在下划线里面） 16 this.prefix, 17 this.prefixText, 18 this.prefixStyle, 19 this.suffixIcon, //输入框后面的图片（在下划线里面） 20 this.suffix, 21 this.suffixText, 22 this.suffixStyle, 23 this.counterText, 24 this.counterStyle, 25 this.filled, 26 this.fillColor, 27 this.errorBorder, 28 this.focusedBorder, 29 this.focusedErrorBorder, 30 this.disabledBorder, 31 this.enabledBorder, 32 this.border, //输入框边框线（默认是下划线，也可以是none，也可以是一个框） 33 this.enabled = true, 34 this.semanticCounterText, 35}) 1new TextField( 2 decoration: InputDecoration( 3 labelText: '请输入手机号', 4 //设置输入框前面有一个电话的按钮 suffixIcon 5 prefixIcon: Icon(Icons.phone), 6 labelStyle: TextStyle( 7 fontSize: 14, 8 color: Colors.grey, 9 ), 10 ), 11)

4、keyboardType

这个属性是设置输入框的输入类型的，类似于 Android 中的 InputType，选值有以下几个：

text 输入文字

multiline 输入文字

number 输入文字

phone 输入文字

datetime 输入文字

emailAddress 输入文字

url

1new TextField( 2 keyboardType: TextInputType.number, 3)

5、obscureText

这个属性用来控制显示隐藏用户输入的内容（密文/明文显示）。

6、textInputAction

这个属性用来控制弹出的键盘中右下角的按钮，这是一个枚举值，有很多种形式（下面举几个例子）：

TextInputAction.done：完成按钮

TextInputAction.go：根据用户输入进行下一步按钮

TextInputAction.newline：换行按钮

TextInputAction.next：下一步按钮

TextInputAction.previous：上一步按钮

TextInputAction.search：搜索按钮

TextInputAction.send：发送按钮

大家可以手动试试各个枚举值的效果。

7、TextCapitalization

这个属性用来控制输入内容的大小写设置，同样是一个枚举值，来看一下具体的值及效果：

TextCapitalization.words：输入的每个单词的首字母大写（用空格隔开的单词）

TextCapitalization.characters：输入的内容全部都大写

TextCapitalization.sentences：输入的内容首字母大写

TextCapitalization.none：默认情况，什么都不设置

8、onChanged

这个属性用来监听输入框的输入，类似Android的TextWatch，但是它只有输入后的值：

1new TextField( 2 onChanged: (String content) { 3 print('content--->$content'); 4 }, 5)

9、cursorWidth、cursorRadius、cursorColor

这几个属性用来设置输入时候的光标。

 1new TextField( 2 decoration: InputDecoration( 3 hintText: '光标设置', 4 hintStyle: TextStyle( 5 fontSize: 14, 6 color: Colors.grey, 7 ), 8 ), 9 cursorColor: Colors.purple, 10 cursorWidth: 6, 11 cursorRadius: Radius.elliptical(2, 8), 12)

原文发布时间为：2018-12-13
本文作者： 24K纯帅豆
本文来自云栖社区合作伙伴“ IT先森养成记”，了解相关信息可以关注“cyg_24kshign”微信公众号