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

原文发布于微信公众号 - IT先森养成记(cyg_24kshign)

原文发表时间:2018-12-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券