Flutter学习之TextField

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

本文主要介绍下Flutter中的输入框的使用

1. TextField

flutter 中常用TextField 作为可编入文本控件。TextField 內部通过InputDecoration 进行绘制，如下面代两所示。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.textAlignVertical,
  this.textDirection,/// 输入文字方向
  this.readOnly = false,/// 是否为只读
  ToolbarOptions? toolbarOptions,
  this.showCursor,
  this.autofocus = false,///自动获取焦点
  this.obscuringCharacter = '•',
  this.obscureText = false,///是否隐藏输入的文字，如密码框
  this.autocorrect = true,///是否自动校验
  SmartDashesType? smartDashesType,
  SmartQuotesType? smartQuotesType,
  this.enableSuggestions = true,
  this.maxLines = 1,/// 最大行树
  this.minLines,/// 最小行数
  this.expands = false,///
  this.maxLength,///最大字符数
  this.maxLengthEnforcement,
  this.onChanged,/// 输入文本发生改变
  this.onEditingComplete,///
  this.onSubmitted,/// 提交确定的回调
  this.onAppPrivateCommand,
  this.inputFormatters,
  this.enabled,///输入框是否可用
  this.cursorWidth = 2.0,///光标宽度
  this.cursorHeight,///光标高度
  this.cursorRadius,///光标圆角弧度
  this.cursorColor,///光标颜色
  this.selectionHeightStyle = ui.BoxHeightStyle.tight,
  this.selectionWidthStyle = ui.BoxWidthStyle.tight,
  this.keyboardAppearance,
  this.scrollPadding = const EdgeInsets.all(20.0),
  this.dragStartBehavior = DragStartBehavior.start,
  bool? enableInteractiveSelection,
  this.selectionControls,
  this.onTap,///输入框点击回调
  this.mouseCursor,
  this.buildCounter,
  this.scrollController,
  this.scrollPhysics,
  this.autofillHints = const <String>[],
  this.clipBehavior = Clip.hardEdge,
  this.restorationId,
  this.scribbleEnabled = true,
  this.enableIMEPersonalizedLearning = true,
}) 

可以发现参数还是很多的，

InputDecoration也提供了丰富的可配置参数用于展示不同状态下TextField的样式。由于TextField的可配置参数比较多，在开发中容易混淆，包括InputDecoration中各种文本与边框的显示逻辑。这里记录下

2.decoration

• icon decoration是TextField组件的装饰（外观）参数，类型是InputDecoration。

TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    icon: Icon(Icons.person),
  ),
)

• hintText hasFloatingPlaceholder参数控制当输入框获取焦点或者不为空时是否还显示labelText，默认为true，显示。

TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    icon: Icon(Icons.person),
  ),
),

• counterText

一般用于计数显示

var _textFieldValue = '';
TextField(
  onChanged: (value){
    setState(() {
      _textFieldValue = value;
    });
  },
  decoration: InputDecoration(
    counterText: '${_textFieldValue.length}/20'
  ),
)

也可以使用buildCounter

TextField(
  maxLength: 100,
  buildCounter: (
    BuildContext context, {
    int currentLength,
    int maxLength,
    bool isFocused,
  }) {
    return Text(
      '$currentLength/$maxLength',
    );
  },
)

• 背景色fillColor

对于输入框的

 decoration: const InputDecoration(
      fillColor:  Color(0xfff1f1f1), filled: true, hintText: '请填写您的意见和反馈说明', enabledBorder: InputBorder.none),
),

-textAlign

-textAlign表示文本的对齐方式，用法参考【TextAlign】。

TextField(
  textAlignVertical: TextAlignVertical.center,
  textDirection: TextDirection.rtl,
)

• controller

controller是输入框文本编辑的控制器，可以获取TextField的内容、设置TextField的内容，下面将输入的英文变为大写：

TextEditingController _controller;

@override
void initState() {
  super.initState();
  _controller = TextEditingController()
    ..addListener(() {
      //获取输入框的内容，变为大写
      _controller.text = _controller.text.toUpperCase();

    });
}

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,
  );
}

@override
dispose() {
  super.dispose();
  _controller.dispose();
}

一般我们在逻辑处理中方便我们获取输入框的内容

final phoneCtl = TextEditingController();
final codeCtl = TextEditingController();
bool get shouldLogin => codeCtl.text.length == 6 && Validator.phone.verify(phoneCtl.text) && selectedClause.value;

bool get shouldFetchCode => Validator.phone.verify(phoneCtl.text) && !(timer?.isActive ?? false);

• Focus 获取焦点

FocusScope.of(context).requestFocus(_focusNode);

_focusNode为TextField的focusNode：

TextField(
  controller: controller.codeCtl,
  focusNode: codeNode,
  keyboardType: TextInputType.number,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  decoration: const InputDecoration(hintText: '验证码填在这里👇'),
  onChanged: (_) => controller.loginEnable.value = controller.shouldLogin,
)

失去焦点

_focusNode.unfocus();

提示：对于多个输入框我们使用键盘可以跳转

3. 小结

输入框是一个开发中比较常用的Widget，通过设置decoration可以设置我们想要的样式，通过各种回调和监听可以知道我们输入内容。