Flutter文本输入框-TextField

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	边框右下方计数器