Flutter组件学习（三）—— 输入框TextFiled-白红宇

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

阅读量：6649 次

发布时间：2019-06-25

本文共 4198 字，大约阅读时间需要 13 分钟。

序言

Google 前两天发布了 Flutter 1.0 正式版本，正式版发布之后，LZ身边越来越多的人都开始入坑了，不得不说 Flutter 框架的魅力还是很吸引人的哈，所以我们更要抓紧学习了；之前我写了两篇文章来介绍和，今天我们继续学习输入框 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();@overridevoid initState() {  super.initState();  _focusNode.addListener(_focusNodeListener);}Future
    
      _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 输入文字

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),)

代码已上传至