1、常用属性值及含义

TextField常用属性值含义
maxLength最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
maxLines最大行数
autocorrect是否自动更正
autofocus是否自动对焦
obscureText是否是密码
textAlign文本对齐方式，与Text的textAlign属性含义一致
style输入文本的样式
inputFormatters允许的输入格式
onChanged内容改变的回调
onSubmitted内容提交(按回车)的回调
enabled是否禁用

示例

      TextField(
        maxLength: 30,//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
        maxLines: 1,//最大行数
        autocorrect: true,//是否自动更正
        autofocus: true,//是否自动对焦
        obscureText: true,//是否是密码
        textAlign: TextAlign.center,//文本对齐方式
        style: TextStyle(fontSize: 30.0, color: Colors.blue),//输入文本的样式
        inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式
        onChanged: (text) {//内容改变的回调
          print('change $text');
        },
        onSubmitted: (text) {//内容提交(按回车)的回调
          print('submit $text');
        },
        enabled: true,//是否禁用
      ),

（图一）TextFeild常用属性赋值示例

2、普通输入文本

最简易的TextFeild不包含提示文本。

          new TextField(
             //最普通的TextField，没有任何提示
              ),

（图二）TextFeild简易示例

3、包含提示文案的输入文本

          new 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);
}

（图三）TextFeild包含提示文案示例

4、登录示例

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

class TextFieldDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextFieldDemoState();
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("文本输入控件"),
      ),
      body: new Column(
        children: <Widget>[
          new Text(
            "下面是登录演示",
            style: new TextStyle(
                color: const Color(0xffff9900),
                decoration: TextDecoration.underline,
                decorationColor: const Color(0xffff9900),
                fontSize: 21.0),
          ),
          TextField(
            controller: phoneController,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.phone),
              labelText: '请输入用户名)',
              helperText: '请输入11位手机号',
            ),
            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 main() {
  runApp(new MaterialApp(
    title: "输入控件案例",
    theme: new ThemeData(primaryColor: Colors.deepOrangeAccent),
    home: new TextFieldDemo(),
  ));
}

（图四）TextFeild登录示例

5、其他功能

5.1 keyboardType 键盘类型

控制输入的键盘类型。

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

示例

TextField(
  keyboardType: TextInputType.number,
),

5.2 textCapitalization 字母大写

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

textCapitalization属性值含义
TextCapitalization.sentences这是我们期望的正常类型的大写，每个句子的首字母大写。
TextCapitalization.characters大写句子中的所有字符。
TextCapitalization.words将每个单词的首字母大写。
TextCapitalization.none不做转换。

示例

          TextField(
            textCapitalization: TextCapitalization.sentences,
          ),

5.3 更改TextField中的光标

可以直接从TextField小部件自定义游标。

可以更改角落的光标颜色，宽度和半径。
例如，这里我没有明显的原因制作一个圆形的红色光标。

属性值含义
cursorColor光标颜色
cursorRadius光标圆角
cursorWidth光标宽度

示例

TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),