Flutter Textfield可以实现的效果
image.png
基本属性
TextField
const TextField({
Key key,
this.controller,//控制器
this.focusNode,//焦点
this.obscureText = false,//是否隐藏文本，即显示密码类型
this.maxLines = 1,//最多行数，高度与行数同步
this.autofocus = false,//自动聚焦
this.decoration = const InputDecoration(),//装饰
TextInputType keyboardType,//键盘类型，即输入类型
this.onChanged,//输入改变回调
//以下属性不常用,用到再来查看
this.textInputAction,//键盘按钮
this.textCapitalization = TextCapitalization.none,//大小写
this.style,//样式
this.strutStyle,
this.textAlign = TextAlign.start,//对齐方式
this.textDirection,
this.autocorrect = true,//自动更正
this.minLines,//最小行数
this.expands = false,
this.maxLength,//最多输入数，有值后右下角就会有一个计数器
this.maxLengthEnforced = true,
this.onEditingComplete,//输入完成时，配合TextInputAction.done使用
this.onSubmitted,//提交时,配合TextInputAction
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,
})
属性有很多但是很多都不常用,不用死记,记几个常用即可
decoration（装饰器） 接收一个InputDecoration类型的值，主要用于控制TextField的外观以及提示信息等 这里介绍下这个重要的Widget,
InputDecoration
InputDecoration({
this.icon, //位于装饰器外部和输入框前面的图片
this.labelText, //用于描述输入框，例如这个输入框是用来输入用户名还是密码的，当输入框获取焦点时默认会浮动到上方，
this.labelStyle, // 控制labelText的样式,接收一个TextStyle类型的值
this.helperText, //辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示
this.helperStyle, //helperText的样式
this.hintText, //提示文本，位于输入框内部
this.hintStyle, //hintText的样式
this.hintMaxLines, //提示信息最大行数
this.errorText, //错误信息提示
this.errorStyle, //errorText的样式
this.errorMaxLines, //errorText最大行数
this.hasFloatingPlaceholder = true, //labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
this.isDense, //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小
this.contentPadding, //内间距
this.prefixIcon, //位于输入框内部起始位置的图标。
this.prefix, //预先填充的Widget,跟prefixText同时只能出现一个
this.prefixText, //预填充的文本，例如手机号前面预先加上区号等
this.prefixStyle, //prefixText的样式
this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛，控制输入内容是否明文
this.suffix, //位于输入框尾部的控件，同样的不能和suffixText同时使用
this.suffixText,//位于尾部的填充文字
this.suffixStyle, //suffixText的样式
this.counter,//位于输入框右下方的小控件，不能和counterText同时使用
this.counterText,//位于右下方显示的文本，常用于显示输入的字符数量
this.counterStyle, //counterText的样式
this.filled, //如果为true，则输入使用fillColor指定的颜色填充
this.fillColor, //相当于输入框的背景颜色
this.errorBorder, //errorText不为空，输入框没有焦点时要显示的边框
this.focusedBorder, //输入框有焦点时的边框,如果errorText不为空的话，该属性无效
this.focusedErrorBorder, //errorText不为空时，输入框有焦点时的边框
this.disabledBorder, //输入框禁用时显示的边框，如果errorText不为空的话，该属性无效
this.enabledBorder, //输入框可用时显示的边框，如果errorText不为空的话，该属性无效
this.border, //正常情况下的border
this.enabled = true, //输入框是否可用
this.semanticCounterText,
this.alignLabelWithHint,
})
属性也是很多下面举几个常用的例子
样式
基础样式
TextField(),
很简单，无任何参数，当然效果也很简单。(默认是带下划线的)
image.png
隐藏文本(变成密码框)
修改obscureText属性值
TextField(
obscureText: true,
),
image.png
键盘类型
键盘类型 即 可输入的类型，比如number就只能输入数字
TextField(
keyboardType: TextInputType.number, // TextInputType还有很多别键盘可以根据自己需要的场景调用
),
image.png
最多行数
设置最多3行 (设置的行数会影响TextField高度)
TextField(
maxLines: 3,
),
image.png
InputDecoration 装饰器
这个InputDecoration可以控制textField的很多样式 如
图标,前后图标,前后文字,提示文本,帮助文本,错误文本 边框等等
-
placeholder 提示文字
TextField(
decoration: InputDecoration(
hintText: '请输入账号aaa',
),
),
image.png
-
去除下划线(早就看他不舒服了)
TextField(
decoration: InputDecoration
{
hintText: '请输入删除车辆的原因',
border:InputBorder.none
}
),
image.png
-
边框
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
image.png
无论是下面的装饰线，还是矩形边框装饰线，失焦后都是 灰色 ,对焦都是主题颜色的 这里你可能会问我怎么改变他边框的颜色呢OutlineInputBorder里的borderSide是无法改变的,这是flutter 的一个坑
-
解决方案 包裹一层
ThemeWidget
Theme(
data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
// borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//没什么卵效果
)),
),
);
这里还有个坑 ThemeData(primaryColor: Colors.red, hintColor: Colors.blue), 这个hintColor 默认颜色好像还是不起作用,这个问题不在怎么设置,知道的可以回复一下,3q
-
圆角
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
),
),
),
image.png
图标
图标有3种
-
左侧外的图标
TextField(
decoration: InputDecoration(
icon: Icon(Icons.person),
),
),
image.png
-
左侧内图标
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone_android),
),
),
image.png
-
右侧内图标
TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.close),
onPressed: () {
controller.clear();
},
),
),
),
image.png
还有一些什么帮助文字,错误文字,悬浮文字,前后填充文字 这里就不一一介绍了,用到的情况较少
获取输入内容
有两种方式：
- onChanged
onChanged是输入内容改变时的回调，返回一个String类型的数值，可以用一个变量记一下
TextField(
onChanged: (text) {
print("输入改变时" + text);
},
),
- controller
controller控制器，初始化：
var controller = TextEditingController();
controller.addListener(() {});
//配置给TextField
TextField(
controller: controller,
),
//获取输入的值
controller.text
//清除Textfield输入的值
controller.clear();
焦点问题
往往我们在事件中提交的时候，是需要关闭软键盘的
这里我们就用到了focusNode
初始化：
FocusNode userFocusNode = FocusNode();
TextField(
focusNode: userFocusNode,
),
//然后在需要的地方调用:失去焦点
userFocusNode.unfocus();
点击APP别的地方(不是其他textField的时候需要收起键盘) FocusScope.of(context).requestFocus(); //获取焦点的意思,你获取了焦点,别人就失去了焦点
溢出问题
-
软键盘弹出之后遮盖
-
软键盘弹出之后高度溢出
解决方案:
用滑动组件包裹起来（SingleChildScrollView,ListView等），这样软键盘弹出的时候，输入框也会自动向上滑。
以上如有说的不正确的地方,犹豫刚接触不久,还望指出.
image.png
文章转自:
@yechaoa
https://blog.csdn.net/yechaoa/article/details/90906689
网友评论