这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战javascript

TextField

顾名思义文本输入框，相似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。相信你们在原生客户端上都用过这个功能，就不在作具体介绍了，接下来仍是具体介绍下Flutter中TextField的用法。java

如下内容已更新到 githubgit

TextField的构造方法：github

const TextField({
    Key key,
    this.controller,            //控制器，控制TextField文字
    this.focusNode,
    this.decoration: const InputDecoration(),      //输入器装饰
    TextInputType keyboardType: TextInputType.text, //输入的类型
    this.style,
    this.textAlign: TextAlign.start,
    this.autofocus: false,
    this.obscureText: false,  //是否隐藏输入
    this.autocorrect: true,
    this.maxLines: 1,
    this.maxLength,
    this.maxLengthEnforced: true,
    this.onChanged,            //文字改变触发
    this.onSubmitted,          //文字提交触发（键盘按键）
    this.onEditingComplete,  //当用户提交可编辑内容时调用
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
  })
复制代码

先来试试最基本的TextField:api

/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */
 
import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(
      title: Text('输入和选择'),
    ),body:TextField(),
    );
  }
}

复制代码

这是一个默认的输入框,咱们什么都没有作的时候的样子. 而后咱们试一下它的属性markdown

TextField(
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(10.0),
          icon: Icon(Icons.text_fields),
          labelText: '请输入你的姓名)',
          helperText: '请输入你的真实姓名',
        ),
        onChanged: _textFieldChanged,
        autofocus: false,
      ),


  void _textFieldChanged(String str) {
    print(str);
  }
复制代码

咱们增长一个keyboardType属性，把keyboardType设置为TextInputType.number 能够看到每次咱们让TextField得到焦点的时候弹出的键盘就变成了数字优先了。而后咱们为输入框作一些其余的效果，如提示文字，icon、标签文字等。咱们给上面的代码新增decoration属性，设置相关属性，能够发现当咱们的TextField得到焦点时，图标会自动变色，提示文字会自动上移。app

还能够看到我加了一个onChanged。 onChanged是每次输入框内每次文字变动触发的回调，onSubmitted是用户提交而触发的回调。每当用户改变输入框内的文字，都会在控制台输出如今的字符串.与onSubmitted用法相同.ide

接下来，咱们实现一个简单的登陆页面:oop

/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
  //手机号的控制器
  TextEditingController phoneController = TextEditingController();

  //密码的控制器
  TextEditingController passController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('输入和选择'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            controller: phoneController,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.phone),
              labelText: '请输入你的用户名)',
              helperText: '请输入注册的手机号',
            ),
            autofocus: false,
          ),
          TextField(
              controller: passController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10.0),
                icon: Icon(Icons.lock),
                labelText: '请输入密码)',
              ),
              obscureText: true),
          RaisedButton(
            onPressed: _login,
            child: Text('登陆'),
          ),
        ],
      ),
    );
  }

  void _login() {
    print({'phone': phoneController.text, 'password': passController.text});
    if (phoneController.text.length != 11) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('手机号码格式不对'),
              ));
    } else if (passController.text.length == 0) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('请填写密码'),
              ));
    } else {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('登陆成功'),
              ));
      phoneController.clear();
    }
  }

  void onTextClear() {
    setState(() {
      phoneController.clear();
      passController.clear();
    });
  }
}

复制代码

在布局上，咱们使用一个Column包含了两个TextField和一个RaisedButton。在逻辑上，每当咱们点击下面的按钮都会判断用户名密码是否符合要求，而且使用控制器清空已经输入的用户名和密码。布局

当用户输入的手机号码不是11位的时候提示手机号码格式错误，当用户没有输入密码时，提示填写密码，用户名和密码符合要求时提示登陆成功。

我这里登陆成功以后还调了一个方法：phoneController.clear() 清空了用户名输入框中的内容。

代码的逻辑很简单。关于TextField的其余用法就不在一一介绍了，有兴趣的小伙伴能够本身尝试下.

使用decoration美化输入框

先看一下效果：

代码：

TextField(
            controller: accountController,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: '请输入帐号',
              labelText: '左上角',
              prefixIcon: Icon(Icons.person),
            ),
          )
复制代码

能够看到，我先添加了一个decoration属性.

decoration属性介绍:

border：增长一个边框， hintText：未输入文字时，输入框中的提示文字， prefixIcon：输入框内侧左面的控件， labelText：一个提示文字。输入框获取焦点/输入框有内容会移动到左上角，不然在输入框内，labelTex的位置. suffixIcon: 输入框内侧右面的图标. icon : 输入框左侧添加个图标

在多个输入框内切换焦点

介绍一下onEditingComplete这个方法:

当用户提交可编辑内容时调用(例如，用户按下键盘上的“done”按钮)。

onEditingComplete的默认实现根据状况执行2种不一样的行为:

当完成操做被按下时，例如“done”、“go”、“send”或“search”，用户的内容被提交给[controller]，而后焦点被放弃。
当按下一个未完成操做(如“next”或“previous”)时，用户的内容被提交给[controller]，但不会放弃焦点，由于开发人员可能但愿当即将焦点转移到[onsubmit]中的另外一个输入小部件。

咱们有时候会须要这样的状况, 好比一个登陆页面, 须要输入帐号和密码 , 天然输入完帐号就要输入密码了 , 咱们在输入帐号结束的时候 , 让密码输入框获取到焦点 .

看一下代码:

...
  FocusNode secondTextFieldNode = FocusNode();
...
Column(
        children: <Widget>[
          TextField(
            /* onChanged: (text) {
          value = text;
          print(value);
        },*/
            autofocus: false, //是否自动获取焦点
            controller: _textController,
            decoration: InputDecoration(
              suffixIcon: Icon(Icons.chevron_right), //输入框内右侧图标
              icon: Icon(Icons.person), //输入框左侧图标
              prefixIcon: Icon(Icons.skip_previous), //输入框内左侧图标
              labelText: 'labelText',
              hintText: 'hintText',
              helperText: 'helperText',
            ),
            onEditingComplete: () =>
                FocusScope.of(context).requestFocus(secondTextFieldNode),
          ),
          TextField(
            focusNode: secondTextFieldNode,
            decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(horizontal: 15.0)),
          ),
        ],
      ),
复制代码

我在顶层建立了一个交电接点并附加给第二个输入框, 在第一个输入框的onEditingComplete方法中是用

FocusScope.of(context).requestFocus(secondTextFieldNode),
复制代码

方法来让第二个输入框请求获取焦点, 固然你也能够添加个按钮 , 点击按钮执行这个方法来实现切换焦点的功能.

例如: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjSYHYmc-1573730655449)(cdn-images-1.medium.com/max/800/1*v…)] 代码很简单,我就不贴了.

keyboardType

TextField成为焦点时显示的键盘类型。

TextField(
  keyboardType: TextInputType.number,
),
复制代码

类型是：

TextInputType.text（普通完整键盘）
TextInputType.number（数字键盘）
TextInputType.emailAddress（带有“@”的普通键盘）
TextInputType.datetime（带有“/”和“：”的数字键盘）
TextInputType.multiline（带有选项以启用有符号和十进制模式的数字键盘）

TextInputAction

更改TextField的textInputAction能够更改键盘自己的操做按钮。

TextField(
  textInputAction: TextInputAction.search,
),
复制代码

这会致使“完成”按钮被“搜索”按钮替换：

TextCapitalization

TextField提供了一些有关如何使用户输入中的字母大写的选项。

TextCapitalization.sentences : 这是咱们指望的正常类型的大写，每一个句子的首字母大写。

TextCapitalization.characters:大写句子中的全部字符。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ykAhgu0-1573730655451)(cdn-images-1.medium.com/max/800/1*S…)]

TextCapitalization.words : 将每一个单词的首字母大写。

更改TextField中的光标

能够直接从TextField小部件自定义游标。

能够更改角落的光标颜色，宽度和半径。例如，这里我没有明显的缘由制做一个圆形的红色光标。

TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),
复制代码

控制TextField中的大小和最大长度

TextFields能够控制在其中写入的最大字符数，最大行数并在键入文本时展开。

TextField(
  maxLength: 4,
),
复制代码

经过设置maxLength属性，将强制执行最大长度，而且默认状况下会将计数器添加到TextField。

github源码

flutter TextField 输入框组件