零基础学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获取键盘焦点decorationInputDecorationinputTypekeyboardTypetextInputAction键盘的操作按钮类型textCapitalizationTextCapitalization.nonestyle输入文本样式textAlignTextAlign.starttextDirection文本方向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 | 小程序 | 鸿蒙 全网可关注：花生皮编程