TextField
| InputDecoration属性 | 作用 | 备注 |
|---|---|---|
| icon | 文本框外，左侧的图标 | |
| labelText | 标签，文本框获取焦点后移到左上角，字体变小 | |
| hintText | 提示，文本框输入内容后不显示，无内容则显示 | 设置labelText，labelText正常显示时hintText不显示 |
| helperText | 文本框外，左下角的提示文字 | 设置errorText时，只显示errorText，不显示helperText |
| errorText | 文本框外，左下角的错误提示 | |
| counterText | 文本框外，右下角 | 设置counter时，只显示counter |
| counter | 文本框外，右下角Widget | |
| prefixIcon | 文本框内，最左边图标，一直显示 | |
| prefix | 文本框内，prefixIcon右侧，内容输入区左侧，获取焦点后显示 | |
| suffixIcon | 文本框内，最右侧图标，一直显示 | |
| suffix | 文本框内，suffixIcon左侧，内容输入区右侧，获取焦点后显示 | |
| border | 文本框边框 | 还有各种状态下的边框可以设置，比如focusedBorder等 。设置无边框要用InputBorder.none，用null无效 |
| contentPadding | 文本框内边距 |
| TextField属性 | 作用 | 备注 |
|---|---|---|
| decoration | 设置各种提示/边框等 | |
| controller | 文本控制，获取文本 | |
| obscureText | 是否隐藏文字内容，为true时不显示内容 | 输入密码时常用 |
| keyboardType | 键盘类型，如数字键盘等 | TextInputType |
| textInputAction | 键盘右下角键的操作 | TextInputAction |
| maxLength | 最大长度，设置这个，文本框右下角counter的位置会默认显示输入字数和最大长度 “0/5” | 设置最大长度，不显示右下角字数的解决方案：1. 设置counterText=""； 2. 不采用maxLength: 8,用 inputFormatters: [LengthLimitingTextInputFormatter(8)] 代替 |
| maxLengthEnforced | 为true时，超过最大长度输入不进去；为false时，超过最大长度可继续输入 | |
| textAlign | 文本位置，居中/靠左/靠右等 | TextAlign |
| textDirection | 文本显示方向，左到右/右到左 | textDirection |
| onChanged | 文本变化的时候会回调 | String |
| onEditingComplete | 输入完成的时候回调 | 在onSubmitted之前 |
| onSubmitted | 提交的时候会回调 | String |
textfield默认.jpg
textfield获取焦点后.jpg
开发中的问题及解决：
TextField输入很多文字，会横向滑动，不能自动换行
解决：同时设置minLines和maxLines。只设置maxLines的话，输入框的初始高度会很高；只设置minLines的话，只能显示minLines行，如果为1，只能横向滑动，大于1的时候，垂直滑动。输入不符合要求的时候，errorText怎么设置并显示
解决：新建一个类，继承自TextField，对其功能进行扩展
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class EditText extends TextField {
EditText({
Key key,
controller,
focusNode,
decoration = const InputDecoration(),
TextInputType keyboardType,
textInputAction,
textCapitalization = TextCapitalization.none,
style,
strutStyle,
textAlign = TextAlign.start,
textDirection,
autofocus = false,
obscureText = false,
autocorrect = true,
maxLines = 1,
minLines,
expands = false,
maxLength,
maxLengthEnforced = true,
onChanged,
onEditingComplete,
onSubmitted,
inputFormatters,
enabled,
cursorWidth = 2.0,
cursorRadius,
cursorColor,
keyboardAppearance,
scrollPadding = const EdgeInsets.all(20.0),
dragStartBehavior = DragStartBehavior.start,
enableInteractiveSelection,
onTap,
buildCounter,
errorText,
clearText = false,
}) : super(
key : key,
controller: controller,
focusNode: focusNode,
decoration: decoration.copyWith(
errorText: errorText,
suffix: clearText ? new GestureDetector(
onTap: () {
controller.clear();
},
child: new Icon(Icons.clear),
) : null,
),
keyboardType:keyboardType,
textInputAction:textInputAction,
textCapitalization:textCapitalization,
style:style,
strutStyle:strutStyle,
textAlign:textAlign,
textDirection:textDirection,
autofocus:autofocus,
obscureText:obscureText,
autocorrect:autocorrect,
maxLines:maxLines,
minLines:minLines,
expands:expands,
maxLength:maxLength,
maxLengthEnforced:maxLengthEnforced,
onChanged:onChanged,
onEditingComplete:onEditingComplete,
onSubmitted:onSubmitted,
inputFormatters:inputFormatters,
enabled:enabled,
cursorWidth:cursorWidth,
cursorRadius:cursorRadius,
cursorColor:cursorColor,
keyboardAppearance:keyboardAppearance,
scrollPadding:scrollPadding,
dragStartBehavior:dragStartBehavior,
enableInteractiveSelection:enableInteractiveSelection,
onTap:onTap,
buildCounter: buildCounter,
);
}
应用：
String errorText;
TextEditingController controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("基础Widget"),
),
body: new SingleChildScrollView(
child: new Container(
child: new EditText(
decoration: new InputDecoration(
hintText: "input your account",
contentPadding: EdgeInsets.fromLTRB(15, 10, 15, 10),
border: new OutlineInputBorder(
borderSide: new BorderSide(
width: 1.0,
color: Colors.cyan,
)
),
),
controller: controller,
onEditingComplete: _check,
errorText: errorText,
clearText: true,
),
),
),
);
}
_check() {
setState(() {
if(controller.text.contains("2b")) {
errorText = "2bhhhh";
} else {
errorText = null;
}
});
}