Flutter组件学习（三）—— 输入框TextFiled
序言
Google 前两天发布了 Flutter 1.0 正式版本，正式版发布之后，LZ身边越来越多的人都开始入坑了，不得不说 Flutter 框架的魅力还是很吸引人的哈，所以我们更要抓紧学习了；之前我写了两篇文章来介绍 Flutter中的Text组件 和 Flutter中的Image组件，今天我们继续学习输入框 TextFiled 组件，话不多说，先上图：
image
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)代码已上传至Github：Github:https://github.com/24Kshign/FlutterWorkSpace/tree/master/flutter_element
腾讯云开发者
