学习资源来源 ： Flutter TextField详解 - 掘金 (juejin.cn)

可以使用 TextField 小部件来创建一个文本输入字段

 这是 TextField 的一些属性

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

下面我们来简单的实践一下

TextField(
                  
                )

效果是 ：

 一个很简单的输入框就出现了

下面我们增加一个属性，使得输入的数据隐藏起来

TextField(
    obscureText: true,
                )

效果如下 ：

 我们再来丰富一下属性

控制输入类型 ：

就是我们有时候要控制数据的类型

可以使用inputFormatters属性来添加输入格式验证器。通过使用验证器，你可以限制输入的字符和格式。

代码如下：

TextField(
       decoration: InputDecoration(
       labelText: '请输入数字',
                ),
       keyboardType: TextInputType.number,
       inputFormatters: [
       FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
            ],
       ),

效果如下：

        我们通过设置keyboardType为TextInputType.number来指定输入键盘为数字键盘。然后，我们使用inputFormatters属性，并传递一个FilteringTextInputFormatter实例，该实例通过正则表达式[0-9]来允许只输入数字字符。
        你可以根据需要进行更多自定义。例如，你可以使用不同的正则表达式来验证其他类型的输入，或者创建自定义的输入格式验证器。

怎么控制输入的行数呢

这个行数是你显示出来的行数，如果你写了三行的数据，那么显示出来的就只有第二第三行

maxLines: 2,   // 控制最大行数
minLines: 1,   // 控制最少行数

效果如下：

 TextField的高度是会自适应的。

计数器

下面我们来增加一个计数器，右下角会出现一个计数器

上代码

maxLength: 20,

效果如下：

怎么添加图标 ？

要在TextField中添加图标，可以使用prefixIcon或suffixIcon属性。这些属性允许您在文本字段的左侧（prefixIcon）或右侧（suffixIcon）添加图标。

我们先从左侧图标下手

TextField(
       decoration: InputDecoration(
       labelText: '请输入数字',
       prefixIcon: Icon(Icons.search),
       hintText: 'Search',
          ),
       maxLines: 2,
       minLines: 1,
       maxLength: 20,

       ),

在上面的示例中，我们使用prefixIcon属性将搜索图标添加到TextField的左侧，并使用hintText属性设置了输入提示文本。

您还可以使用其他Icon属性来自定义图标，如iconSize、color等。如果您想要与文本字段交互的图标，例如清除图标，您可以使用suffixIcon属性。

TextField(
       decoration: InputDecoration(
       labelText: '请输入数字'suffixIcon: Icon(Icons.search),
       hintText: 'Search',
            ),
       maxLines: 2,
       minLines: 1,
       maxLength: 20,

                ),