TextField
文本输入框，类似Android中的EditText
TextField(
cursorColor: Colors.blue,
cursorHeight: 15,
cursorRadius: Radius.circular(10),
cursorWidth: 2,
showCursor: true,
controller: _controller,
focusNode: _focusNode,
obscuringCharacter: "-",
obscureText: true,
decoration: InputDecoration(
isCollapsed: false,
labelText: "Label",
helperText: "Helper",
counterText: "",
contentPadding: EdgeInsets.all(0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue)),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red))),
onSubmitted: (str) {
print('_TextFieldViewState.buildView--$str');
},
textInputAction: TextInputAction.search,
onChanged: (content) {
print('_TextFieldViewState.buildView-changed:$content');
},
)
光标-cursor
| 参数 | 说明 |
|---|---|
| cursorColor | 光标的颜色 |
| cursorHeight | 光标的高度 |
| cursorRadius | 光标的弧度 |
| cursorWidth | 光标的宽度 |
| showCursor | 是否显示光标 |
文本控制器-controller
通过controller可以获取输入框的内容_controller.text，清除输入框内容_controller.clear()等
TextEditingController _controller = TextEditingController();
焦点变化-focusNode
通过设置TextField的focusNode，
FocusNode _focusNode = FocusNode();
并调用unfocus和requestFoucs来使其失去或获取焦点
if (_focusNode.hasFocus) {
_focusNode.unfocus();
} else {
_focusNode.requestFocus();
}
获取焦点
未获取焦点
内容是否可见-obscureText
类似密码那种，可以自定义默认显示的字符串
obscureText：true：不可见，false：可见
obscuringCharacter：不可见时，占位符号
TextField(
obscuringCharacter: "-",
obscureText: true,)
obscure
键盘操作按钮-textInputAction
设置键盘右下角的操作按钮，介绍常见的几个
| 参数 | 说明 |
|---|---|
| TextInputAction.done | 完成 |
| TextInputAction.search | 搜索 |
| TextInputAction.done | 发送 |
| TextInputAction.go | 前往 |
搜索
键盘操作按钮点击时间-onSubmitted
这个即是上方操作按钮点击时的回调
输入内容时的回调-onChanged
ValueChanged<String>? onChanged
文本修饰符-InputDecoration
介绍InputDecoration常用的几个属性
| 参数 | 说明 |
|---|---|
| isCollapsed | 输入文本是否默认带间距，true：内容有默认内边距 |
| labelText | 文本框上方标签内容 |
| helperText | 文本框下方帮助内容 |
| focusedBorder | 获取焦点时的边框 |
| border | 默认边框 |
| counterText | 边框右下方计数器 |
| contentPadding | 内容内间距 |
| counterText | 边框右下方计数器 |
| counterText | 边框右下方计数器 |
