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,)

键盘操作按钮-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	边框右下方计数器

Flutter文本输入框-TextField相关推荐

Flutter文本输入框TextField的焦点控制
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. github? 你可能需要百度同步 CSDN 网易云课堂教程掘金知乎 Flutter系列文章头条同步本文章首发于微信公众号( ...
Flutter文本输入框TextField控制器TextEditingController，TextField预设内容，获取TextField中的输入内容，兼听TextField中的内容变化
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. github? 你可能需要百度同步 CSDN 网易云课堂教程掘金知乎 Flutter系列文章头条同步本文章首发于微信公众号( ...
Flutter文本输入框TextField属性（InputDecoration、textInputAction、inputFormatters等等）详解
文章目录 TextField TextField decoration keyboardType TextField textInputAction TextField onChanged TextF ...
【鸿蒙 HarmonyOS】UI 组件 ( 文本输入框 TextField 组件 )
文章目录一.布局中设置 TextField 组件二.代码中获取并设置 TextField 组件一.布局中设置 TextField 组件 TextField 组件是文本输入框 , 允许用户在界面中 ...
[Ext JS]3.2.2 文本输入框textfield
Ext.form.field.Text (xtype: textfield) 一般使用在表单(Form)面板中用于接收一般的输入, textfield对应标准html 的文本类型的input .其可 ...
Flutter中文本输入框TexeFieldr键盘样式TextInputType总结TexeField设置不可编辑
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. TextField 系列文章 TextField的基本使用以及TextField常用属性精讲<点击查看详情> ...
Flutter系列之TextField限制数字输入
flutter的文本输入框TextField的设置项非常多,有时候会忘记怎么设置常用的输入限制项了,在这里罗列一下经常用到的一些设置项,免得大家去猜去记忆. TextField的常用设置一般包括,去掉 ...
flutter text 左对齐_flutter输入框TextField中文本textAlign对齐分析篇
当我们在使用一个 TextField 构建一个输入框时,会有如下效果: 在实际应用程序的开发中,有时我们会希望输入的文字居中对齐或者是右对齐,那么就应用到了我本文章中所讲述内容,凡是涉及到一个内容,我 ...
flutter输入框TextField中文本textAlign对齐分析篇
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息精通点的可以查看这里精述 Flutter 从入门实践到开发一个APP之UI基础篇视频 flutter从入 ...