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

序言

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 组件的时候已经讲过的，接下来咱们一个一个来看这些属性：

一、controller

根据字面意思咱们就能够知道，这是一个控制器，毫无疑问固然是控制 TextField 组件的了，用处有不少，能够监听输入框的输入（经过controller.addListener()），能够获取输入框的值，能够设置输入框的值等等。

TextEditingController _textEditingController = new TextEditingController();

new TextField(
  controller: _textEditingController,
),
new RaisedButton(
  onPressed: () {
    print(_textEditingController.text);
    _textEditingController.clear();
  },
  child: Text('清除'),
)

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

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

四、keyboardType

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

• text 输入文字
• multiline 输入文字
• number 输入文字
• phone 输入文字
• datetime 输入文字
• emailAddress 输入文字
• url

new TextField(
  keyboardType: TextInputType.number,
)

五、obscureText

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

六、textInputAction

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

• TextInputAction.done：完成按钮
• TextInputAction.go：根据用户输入进行下一步按钮
• TextInputAction.newline：换行按钮
• TextInputAction.next：下一步按钮
• TextInputAction.previous：上一步按钮
• TextInputAction.search：搜索按钮
• TextInputAction.send：发送按钮

你们能够手动试试各个枚举值的效果。

七、TextCapitalization

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

• TextCapitalization.words：输入的每一个单词的首字母大写（用空格隔开的单词）
• TextCapitalization.characters：输入的内容所有都大写
• TextCapitalization.sentences：输入的内容首字母大写
• TextCapitalization.none：默认状况，什么都不设置

八、onChanged

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

new TextField(
  onChanged: (String content) {
    print('content--->$content');
  },
)

九、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

公众号

欢迎关注个人我的公众号【IT先森养成记】，专一大前端技术分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技术；在这里你能获得的不止是技术上的提高，还有一些学习经验以及志同道合的朋友，赶快加入咱们，一块儿学习，一块儿进化吧！！！