Flutter TextField 输入框 简单使用
创建方式一：
///用于文本输入框
TextEditingController controller = new TextEditingController();
/// 设置TextField中显示的内容
void setEditeInputTextFunction(String flagText) {
controller .text = flagText;
}
/// 清除TextField中显示的内容
void clearEditeInputTextFunction() {
controller .text = "";
///或者使用clear方法
controller .clear();
}
TextField(
controller: controller,
///当TextField中输入的内容发生改变时回调
onChanged: (value) {
print("TextField 中输入的内容 $value");
},
decoration: InputDecoration(
hintText: "提示的内容",
helperStyle:TextStyle(
color: Colors.red,
),
),
),创建方式二：
///初始化控制器
TextEditingController controller = new TextEditingController(text: "初始化的内容");
///预设输入框的内容
String preText = "";
///控制 初始化的时候光标保持在文字最后
controller = TextEditingController.fromValue(
///用来设置初始化时显示
TextEditingValue(
///用来设置文本 controller.text = "0000"
text: preText,
///设置光标的位置
selection: TextSelection.fromPosition(
///用来设置文本的位置
TextPosition(
affinity: TextAffinity.downstream,
/// 光标向后移动的长度
offset: preText.length),
),
),
);
///文本输入框
child: TextField(
controller: controller,
///当TextField中输入的内容发生改变时回调
onChanged: (value) {
print("TextField 中输入的内容 $value");
},
decoration: InputDecoration(
hintText: "提示的内容",
helperStyle:TextStyle(
color: Colors.red,
),
),
),TextFiel属性详解:
TextField是一个material design风格的输入框，本身有多种属性，除此之外装饰器InputDecoration也有多种属性，但都比较简单，所以不必担心，且听我娓娓道来。
const TextField({ Key key, this.controller,//控制器 跟文本交互一般通过该属性 this.focusNode,//焦点 this.decoration = const InputDecoration(),//装饰 用来装饰外观 TextInputType keyboardType,//键盘类型，即输入类型 this.textInputAction,//键盘按钮 this.textCapitalization = TextCapitalization.none,//大小写 this.style,//样式 this.strutStyle, this.textAlign = TextAlign.start,//对齐方式 this.textDirection, this.autofocus = false,//自动聚焦 this.obscureText = false,//是否隐藏文本，即显示密码类型 this.autocorrect = true,//自动更正 this.maxLines = 1,//最多行数，高度与行数同步 this.minLines,//最小行数 this.expands = false, this.maxLength,//最多输入数，有值后右下角就会有一个计数器 this.maxLengthEnforced = true, this.onChanged,//输入改变回调 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, })
InputDecoration 属性
const InputDecoration({
this.icon,//左侧外的图标
this.labelText,//悬浮提示，可代替hintText
this.labelStyle,//悬浮提示文字的样式
this.helperText,//帮助文字
this.helperStyle,
this.hintText,//输入提示
this.hintStyle,
this.hintMaxLines,
this.errorText,//错误提示
this.errorStyle,
this.errorMaxLines,
this.hasFloatingPlaceholder = true,//是否显示悬浮提示文字
this.isDense,
this.contentPadding,//内填充
this.prefixIcon,//左侧内的图标
this.prefix,
this.prefixText,//左侧内的文字
this.prefixStyle,
this.suffixIcon,//右侧内图标
this.suffix,
this.suffixText,
this.suffixStyle,
this.counter,//自定义计数器
this.counterText,//计数文字
this.counterStyle,//计数样式
this.filled,//是否填充
this.fillColor,//填充颜色
this.errorBorder,
this.focusedBorder,
this.focusedErrorBorder,
this.disabledBorder,
this.enabledBorder,
this.border,//边框
this.enabled = true,
this.semanticCounterText,
this.alignLabelWithHint,
})。图标
图标有3种：
- 左侧外的图标
TextField(
decoration: InputDecoration(
icon: Icon(Icons.person),
),
),
- 左侧内图标
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone_android),
),
),
- 右侧内图标
TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.close),
onPressed: () {
controller.clear();
},
),
),
),
在右侧图标加了一个IconButton，因为带有点击事件，我们可以在点击的时候清除TextField中的内容。
以上就是图标的介绍，其实除了图标之外，对应的位置也可以显示文字或者自定义显示其他widget 比如出了prefixIcon之外还有其他3个属性，用法跟上面介绍到的自定义计数器是一样的。
this.prefix,
this.prefixText,
this.prefixStyle,提示文字
提示文字有4种：
- 输入提示文字
TextField(
controller: controller,
decoration: InputDecoration(
hintText: '提示内容（请输入....）',
),
),
- 悬浮提示文字
TextField(
controller: controller,
decoration: InputDecoration(
hintText: '请输入...',
),
),
可以看到，默认显示labelText，聚焦之后才显示hintText，所以labelText是可以取代hintText的。
- 帮助提示文字
TextField(
controller: controller,
decoration: InputDecoration(
helperText: "帮助文字",
helperStyle: TextStyle(color: Colors.blue),
),
),
一直显示在左下方
- 错误提示文字
TextField(
decoration: InputDecoration.collapsed(hintText: "无下划线的输入框"),
),
去除下划线
TextField(
decoration: InputDecoration.collapsed(hintText: "无下划线的输入框"),
),
也可以decoration: null, 差别就是没有hintText了
边框：
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
),
),
),
圆角：
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
),
),
),