如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件
今天来学习下TextField文本框组件和Card卡片组件。
只要是应用程序就少不了交互,基本上所有的应用程序都会有用户名、密码输入框,搜索框等等,前面我们有写过一篇基于Form表单的输入功能,今天来看一下TextField文本框组件,文本输入是最常见的一种交互方式,TextField组件就是用来做文本输入的组件。注意这个要和Text组件区分开来,Text组件主要用于显示文本,并不能接受输入文本。
TextField文本框组件
TextField组件构造方法:
const TextField({ Key key, // controller是TextField的控制器,当TextField在编辑时回调, // 如果不设置则TextField默认创建自己的controller,重点是如果两个TextField使用一个controller,那么在一个中输入内容,另一个会同步 this.controller, this.focusNode,//焦点控制 this.decoration = const InputDecoration(),//TextField装饰器,主要用于控制TextField的外观及提示等 TextInputType keyboardType,//键盘类型,有number、phone、emailAddress、text等 this.textInputAction,//键盘事件类型,有send、search等 this.textCapitalization = TextCapitalization.none,// this.style,//输入文本的样式 this.strutStyle, this.textAlign = TextAlign.start,//对齐方式,默认开始位置对齐 this.textDirection,//文本方向,默认从左到右 this.autofocus = false,//是否自动获得焦点,默认false this.obscureText = false,//文本内容是否加密,默认false this.autocorrect = true,//是否自动更正 this.maxLines = 1,//最大行数 this.minLines,//最小行数 this.expands = false, this.maxLength,//最大长度 this.maxLengthEnforced = true,//超过最大长度输入,是否提示错误,默认true,如果设置了false,可以继续输入但是会提示错误 this.onChanged,//内容改变时回调 this.onEditingComplete,//编辑完成时回调 this.onSubmitted,//提交时回调 this.inputFormatters,//允许输入的格式,比如只能输入数字或字母 this.enabled,//是否禁用 this.cursorWidth = 2.0,//光标宽度 this.cursorRadius,//光标圆角 this.cursorColor,//光标颜色 this.keyboardAppearance, this.scrollPadding = const EdgeInsets.all(20.0), this.dragStartBehavior = DragStartBehavior.start, this.enableInteractiveSelection, this.onTap,//点击控件时调用 this.buildCounter, this.scrollPhysics, })