零基础学Flutter编程-UI控件_TextField

什么是TextField

TextField是用于输入文本信息的UI控件.常见效果如下:

基础样例

1.普通输入

效果图

代码

TextField()

2.设置输入框提示信息

效果图

代码

TextField(decoration: InputDecoration(hintText: "花生皮编程"),)

3.设置文字颜色

效果图

代码

TextField(style: TextStyle(color: Color.fromRGBO(0xFF, 0x50, 0xa1, 1)))

4.显示外边框

效果图

代码

TextField(decoration: InputDecoration(border: OutlineInputBorder()),)

常用属性及方法

属性(方法)名 用途
controller 文本控制器
focusNode 获取键盘焦点
decoration InputDecoration
inputType keyboardType
textInputAction 键盘的操作按钮类型
textCapitalization TextCapitalization.none
style 输入文本样式
textAlign TextAlign.start
textDirection 文本方向
readOnly 只读
showCursor 显示光标
autofocus 是否自动对焦
obscureText 是否隐藏内容,例如密码格式
obscuringCharacter 隐藏格式
autocorrect 是否自动校正
maxLines 最大行数,设置为null表示支持多行输入,不显示行数
minLines 最小行数
maxLength 允许输入的最大长度
maxLengthEnforced 是否允许超过输入最大长度
onChanged 文本内容变更时回调
onEditingComplete 提交内容时回调
onSubmitted 用户提示完成时回调
inputFormatters 验证及格式
enabled 是否不可点击
cursorWidth 光标宽度
cursorRadius 光标圆角弧度
cursorColor 光标颜色
keyboardAppearance 键盘亮度,仅限于iOS设备
scrollPadding 滚动到视图中时,填充边距
enableInteractiveSelection 长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
onTap 点击时回调
scrollController 滑动控制器
scrollPhysics 滑动样式

完整源代码

https://gitee.com/hspbc/flutter_demos/tree/master/text_field_demo

其他零基础系列

《零基础学安卓编程》
《零基础学Java编程》
《零基础学鸿蒙编程》

关于我

厦门大学计算机专业 | 前华为工程师
专注《零基础学编程系列》,包含:Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
全网可关注:花生皮编程

你可能感兴趣的:(零基础学Flutter编程-UI控件_TextField)