序言
Google 前两天发布了 Flutter 1.0 正式版本，正式版发布之后，LZ身边越来越多的人都开始入坑了，不得不说 Flutter 框架的魅力还是很吸引人的哈，所以我们更要抓紧学习了；之前我写了两篇文章来介绍 Flutter中的Text组件 和 Flutter中的Image组件，今天我们继续学习输入框 TextFiled 组件，话不多说，先上图：
TextFiled组件的API
先来看一下TextFiled的构造方法：
const TextField({
Key key,
this.controller,
this.focusNode,
this.decoration = const InputDecoration(),
TextInputType keyboardType,
this.textInputAction,
this.textCapitalization = TextCapitalization.none,
this.style,
this.textAlign = TextAlign.start, //类似Text组件
this.textDirection, //类似Text组件
this.autofocus = false,
this.obscureText = false,
this.autocorrect = true,
this.maxLines = 1,
this.maxLength,
this.maxLengthEnforced = true,
this.onChanged,
this.onEditingComplete,
this.onSubmitted,
this.inputFormatters,
this.enabled,
this.cursorWidth = 2.0,
this.cursorRadius,
this.cursorColor,
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.enableInteractiveSelection = true,
this.onTap,
})
哇，乍一看好多配置啊，别急大兄弟，有很多我们在讲 Text 组件的时候已经讲过的，接下来我们一个一个来看这些属性：
1、controller
根据字面意思我们就可以知道，这是一个控制器，毫无疑问当然是控制 TextField 组件的了，用处有很多，可以监听输入框的输入（通过controller.addListener()），可以获取输入框的值，可以设置输入框的值等等。
TextEditingController _textEditingController = new TextEditingController();
new TextField(
controller: _textEditingController,
),
new RaisedButton(
onPressed: () {
print(_textEditingController.text);
_textEditingController.clear();
},
child: Text('清除'),
)
2、focusNode
这个属性可以用来监听输入框是否获取（失去）焦点：
FocusNode _focusNode = new FocusNode();
@override
void initState() {
super.initState();
_focusNode.addListener(_focusNodeListener);
}
Future<Null> _focusNodeListener() async {
if (_focusNode.hasFocus) {
print('获取焦点');
} else {
print('失去焦点');
}
}
new TextField(
focusNode: _focusNode,
)
3、decoration
这个属性用来设置输入框的一些样式，比如前后图标，提示文字，错误文字，占位文字等等，下面来看一下可以设置的东西（有点多，大家可以有需要的时候再去挨个了解）：
const InputDecoration({
this.icon, //输入框前面的图片（在下划线外面）
this.labelText, //顶部提示文字（获取焦点之后会移动到输入框上方）
this.labelStyle,
this.helperText, //底部提示文字（不会移动）
this.helperStyle,
this.hintText, //占位文字
this.hintStyle,
this.errorText, //类似helperText
this.errorStyle,
this.errorMaxLines,
this.hasFloatingPlaceholder = true,
this.isDense,
this.contentPadding, //输入内容的边距，默认有一个边距，可以手动设置
this.prefixIcon, //输入框前面的图片（在下划线里面）
this.prefix,
this.prefixText,
this.prefixStyle,
this.suffixIcon, //输入框后面的图片（在下划线里面）
this.suffix,
this.suffixText,
this.suffixStyle,
this.counterText,
this.counterStyle,
this.filled,
this.fillColor,
this.errorBorder,
this.focusedBorder,
this.focusedErrorBorder,
this.disabledBorder,
this.enabledBorder,
this.border, //输入框边框线（默认是下划线，也可以是none，也可以是一个框）
this.enabled = true,
this.semanticCounterText,
})
new TextField(
decoration: InputDecoration(
labelText: '请输入手机号',
//设置输入框前面有一个电话的按钮 suffixIcon
prefixIcon: Icon(Icons.phone),
labelStyle: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
)
4、keyboardType
这个属性是设置输入框的输入类型的，类似于 Android 中的 InputType，选值有以下几个：
- text 输入文字
- multiline 输入文字
- number 输入文字
- phone 输入文字
- datetime 输入文字
- emailAddress 输入文字
- url
new TextField(
keyboardType: TextInputType.number,
)
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，但是它只有输入后的值：
new TextField(
onChanged: (String content) {
print('content--->$content');
},
)
9、cursorWidth、cursorRadius、cursorColor
这几个属性用来设置输入时候的光标。
new TextField(
decoration: InputDecoration(
hintText: '光标设置',
hintStyle: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
cursorColor: Colors.purple,
cursorWidth: 6,
cursorRadius: Radius.elliptical(2, 8),
)
代码已上传至Github
