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)),                  ),                ),              ),

来源地址：https://blog.csdn.net/qq_28845393/article/details/131505818