第2节：详解TextField

[TOC]

参考文章：

• Flutter官方文档：TextField class

一、TextField class

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,
    this.textDirection,
    this.autofocus = false,		// 是否自动获取焦点
    this.obscureText = false,	// 是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换。
    this.autocorrect = true,	
    this.maxLines = 1,	// 能写入的最大行数
    this.maxLength,		// 能写入的最大字符数
    this.maxLengthEnforced = true,
    this.onChanged,				// 文本框事件：文字改变触发
    this.onEditingComplete,		// 文本框事件：当用户提交可编辑内容时调用(常用于“焦点(FocusNode)”变更)
    this.onSubmitted,			// 文本框事件：文字提交触发（键盘按键）
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,	// 光标宽度 Colors.red
    this.cursorRadius,		// 光标半径 Radius.circular(16.0)
    this.cursorColor,		// 光标颜色 16.0
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.enableInteractiveSelection = true,
    this.onTap,					// 文本框事件：
  }) : assert(textAlign != null),
       assert(autofocus != null),
       assert(obscureText != null),
       assert(autocorrect != null),
       assert(maxLengthEnforced != null),
       assert(scrollPadding != null),
       assert(maxLines == null || maxLines > 0),
       assert(maxLength == null || maxLength > 0),
       keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline),
       assert(enableInteractiveSelection != null),
       super(key: key);

二、文本框的输入器装饰 InputDecoration decoration

const InputDecoration({
    this.icon,
    this.labelText,
    this.labelStyle,
    this.helperText,
    this.helperStyle,
    this.hintText,
    this.hintStyle,
    this.errorText,
    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,
    this.enabled = true,
    this.semanticCounterText,
  }) : assert(enabled != null),
       assert(!(prefix != null && prefixText != null), 'Declaring both prefix and prefixText is not allowed'),
       assert(!(suffix != null && suffixText != null), 'Declaring both suffix and suffixText is not allowed'),
       isCollapsed = false;

图解如下：

输入器装饰 InputDecoration decoration的其他参数

参数	作用	备注
contentPadding	内容的边距，默认是有一个边距的	contentPadding: new EdgeInsets.all(0.0)

2、文本控制器 TextEditingController controller

controller.clear() 清空了用户名输入框中的内容

3、键盘输入类型 TextInputType keyboardType

键盘输入类型（数字，文本等各种类型）：设置TextField获得焦点的时候弹出的键盘

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

4、键盘本身的操作按钮 TextInputAction

TextField(
  textInputAction: TextInputAction.search,
),

5、TextCapitalization

类型	作用
TextCapitalization.characters	大写句子中的所有字符
TextCapitalization.words	将每个单词的首字母大写

6、文本框的其他参数

见类结构

二、键盘

Flutter | 滚动 PageView 自动关闭键盘

PageView(
	onPageChanged: (index) {
		WidgetsBinding.instance?.focusManager.primaryFocus?.unfocus();
	}
)