Flutter TextField

TextField 是一个输入文本的控件。

属性	说明
controller	controller是TextField的控制器，当TextField在编辑时回调，如果不设置则TextField默认创建自己的controller，重点是如果2个TextField使用一个controller，那么在一个中输入字符，另一个会同步。
focusNode	焦点控制，不设置 TextField默认创建一个自己的focusNode，通常用于的情况是填写表单的时候，一个输入框填写完成，直接控制焦点到下一个输入框，而不是通过点击下一个输入框获取焦点
decoration	TextField的样式基本都有这个属性控制，后面会对这个属性详细说明
keyboardType	键盘的类型，有number、phone、emailAddress、text等
textInputAction	键盘事件类型，有send、search等
textCapitalization	设置键盘如何选择大小写，注意不是输入的字符大小写，而是键盘，words：默认为每个单词的第一个字母的大写键盘 sentences：默认为每个句子的第一个字母的大写键盘，characters：默认为每个字符的大写键盘。，none：默认为每个字符的小写键盘。
style	输入文本的样式
textAlign	对齐，默认开始位置对齐
textDirection	方向，默认从左到右
autofocus	是否自动获取焦点，默认false
obscureText	文本是否隐藏，默认false，true：密码框
maxLines	最大行数
maxLength	最大长度
maxLengthEnforced	默认true，如果设置了maxLength，超过了maxLength不在运行输入，如果设置false，可以继续输入但提示错误
onChanged	发生变化时回调
onEditingComplete	编辑完成时回调
onSubmitted	提交时回调
inputFormatters	设置输入的格式，比如只能输入数字或者字母，
enabled	是否禁用
cursorWidth	光标的宽度
cursorRadius	光标四角半径
cursorColor	光标颜色
onTap	点击控件时调用

下面介绍decoration

属性	说明
icon	在TextField前面加一个icon
labelText	在输入框的左边上部显示label
helperText	在输入框的左边底部显示提示信息文字
hintText	输入框为null时的提示文字
errorText	不为null时，边框变为红色，出现错误提示
prefixText、prefixIcon、suffixText、suffixIcon、counterText	位置如图
filled、fillColor	如果filled=true，则背景为fillColor
errorBorder	错误的边框
focusedBorder	获取焦点的边框
focusedErrorBorder	获取焦点而且错误的边框
disabledBorder	禁用的边框
enabledBorder	可用状态下边框
border	边框
enabled	是否 禁用

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

class TextFieldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var controller = TextEditingController();
    controller.addListener(() {
      print('controller:${controller.text}');
    });


    // TODO: implement build
    return Column(
      children: <Widget>[
        Column(
          children: <Widget>[
            Text('同一个controller：'),
            TextField(controller: controller,),
            TextField(controller: controller,),
          ],
        ),
        TextField(
          keyboardType: TextInputType.text,
          textCapitalization: TextCapitalization.characters,
        ),
        TextField(
          textAlign: TextAlign.center,
        ),
        TextField(
          textDirection: TextDirection.rtl,
        ),
        TextField(
          obscureText: true,
        ),
        TextField(
          maxLength: 5,
          maxLengthEnforced: true,
        ),
        TextField(
          inputFormatters: [
            WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),
          ],
        ),
        TextField(
          cursorColor: Colors.red,
          cursorWidth: 5,
          cursorRadius: Radius.circular(10),
        ),
        TextField(
          decoration: InputDecoration(
            icon: Icon(Icons.add),
            labelText: 'label',
          ),
        ),
        TextField(
          decoration: InputDecoration(
            helperText: 'helperText',
            hintText: 'hintText',
          ),
        ),
//        TextField(
//          decoration: InputDecoration(
//            errorText: 'errorText'
//          ),
//        ),
//        TextField(
//          decoration: InputDecoration(
//            prefixText: 'prefixText',
//            prefixIcon: Icon(Icons.add),
//            suffixText: 'suffixText',
//            suffixIcon: Icon(Icons.add),
//            counterText: 'counterText',
//          ),
//        ),
        TextField(
          decoration: InputDecoration(
            filled: true,
            fillColor: Colors.red,
          ),
        ),
        TextField(
          decoration: InputDecoration(
            filled: true,
            border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(20))),
          ),
          keyboardType: TextInputType.number,
          textInputAction: TextInputAction.search,
          obscureText: true,
          onChanged: (value) {
            print('onChanged:$value');
          },
          onEditingComplete: () {
            print('onEditingComplete');
          },
          onSubmitted: (value) {
            print('onSubmitted:$value');
          },
          onTap: () {
            print('onTap');
          },
        ),
        TextField(
          enabled: false,
          decoration:
              InputDecoration(icon: Icon(Icons.add), labelText: 'label'),
        ),

      ],
    );
  }
}

效果：