Flutter TextField 文本输入框的基本属性及详解

Posted 2023-04-18

参考技术A

源码分析：

分析源码可得，TextField 是有状态 StatefulWidget，有丰富的属性，自定义化较高，实践中需要合理利用各种回调；

1、光标的相关属性；cursorColor 为光标颜色，cursorWidth 为光标宽度，cursorRadius 为光标圆角；其中 Radius 提供了 circle 圆角和 elliptical 非圆角两种；

2、textAlign 为文字起始位置，可根据业务光标居左/居右/居中等；注意只是文字开始方向；textDirection 问文字内容方向，从左向右或从右向左；

3、maxLength 为字符长度，设置时默认是展示一行，且右下角有编辑长度与整体长度对比；与 maxLengthEnforced 配合，maxLengthEnforced 为 true 时达到最大字符长度后不可编辑；为 false 时可继续编辑展示有差别；

4、设置 maxLength 之后右下角默认有字符计数器，设置 TextField.noMaxLength 即可只展示输入字符数；

5、maxLines 为允许展现的最大行数，在使用 maxLength 时内容超过一行不会自动换行，因为默认 maxLines=1，此时设置为 null 或固定展示行数即可自动换行；区别在于 null 会展示多行，而 maxLines 最多只展示到设置行数；

6、obscureText 是否隐藏编辑内容，常见的密码格式；

7、enableInteractiveSelection 长按是否出现【剪切/复制/粘贴】菜单；不可为空；

8、keyboardAppearance 为键盘亮度，包括 Brightness.dark/light 两种，但仅限于 ios 设备；

9、textCapitalization 文字大小写；理论上 sentences 为每句话第一个字母大写；characters为每个字母大写；words 为每个单词首字母大写；但该属性仅限于 text keybord，和尚在本地更换多种方式并未实现，有待研究；

10、keyboardType 为键盘类型，和尚理解整体分为数字键盘和字母键盘等；根据设置的键盘类型，键盘会有差别；

a. 数字键盘
--1-- datetime 键盘上可随时访问 : 和 /；
--2-- phone 键盘上可随时访问 # 和 *；
--3-- number 键盘上可随时访问 + - * /

b. 字母键盘
--1-- emailAddress 键盘上可随时访问 @ 和 .；
--2-- url 键盘上可随时访问 / 和 .；
--3-- multiline 适用于多行文本换行；
--4-- text 默认字母键盘；

11、textInputAction 通常为键盘右下角操作类型，类型众多，建议多多尝试；

12、autofocus 是否自动获取焦点，进入页面优先获取焦点，并弹出键盘，若页面中有多个 TextField 设置 autofocus 为 true 则优先获取第一个焦点；

13、focusNode 手动获取焦点，可配合键盘输入等减少用户操作次数，直接获取下一个 TextField 焦点；

14、enabled 设为 false 之后 TextField 为不可编辑状态；

15、decoration 为边框修饰，可以借此来调整 TextField 展示效果；可以设置前置图标，后置图片，边框属性，内容属性等，会在后续集中尝试；若要完全删除装饰，将 decoration 设置为空即可；

16、inputFormatters 为格式验证，例如原生 android 中通常会限制输入手机号或其他特殊字符，在 Flutter 中也可以借此来进行格式限制，包括正则表达式；使用时需要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最长字符；

b. WhitelistingTextInputFormatter 仅允许输入白名单中字符；如 digitsOnly 仅支持数字 [0-9]；

c. BlacklistingTextInputFormatter 防止输入黑名单中字符；如 singleLineFormatter 强制输入单行；
分析源码 RegExp("[/]") 可以设置正则表达式；

17、onChanged 文本内容变更时回调，可实时监听 TextField 输入内容；

18、controller 文本控制器，监听输入内容回调；

19、onTap 点击 TextField时回调；

20、onEditingComplete 在提交内容时回调，通常是点击回车按键时回调；

21、onSubmit 在提交时回调，不可与 onEditingComplete 同时使用，区别在于 onSubmit 是带返回值的回调；

问题小结：

当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单，默认为英文，可通过设置 Flutter 国际化来处理；

（1）在 pubspec.yaml 中集成 flutter_localizations；

2）在 MaterialApp 中设置本地化代理和支持的语言类型；

（1）将 maxLength 设置为 null 仅使用 LengthLimitingTextInputFormatter 限制最长字符；

（2）设置 InputDecoration 中 decoration 属性为空；但是底部有空余，只是隐藏而并非消失；

无法在 Flutter TextField 小部件中垂直居中输入文本和后缀

【中文标题】无法在 Flutter TextField 小部件中垂直居中输入文本和后缀

【英文标题】：Can't vertically center both input text and suffix in the Flutter TextField widget

【发布时间】：2021-06-13 19:54:27

【问题描述】：

我很难在 TextField Flutter 小部件中对齐输入 ext 和后缀。我尝试将它们垂直居中，但由于某种原因不能这样做。

当我不指定后缀时，输入文本会根据需要垂直居中： 当我指定后缀时，输入文本下降而后缀上升，因此它们都不是垂直居中的：

我的代码：

return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Container(
        color: Colors.grey.shade800,
        margin: EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 10,
        ),
        height: 70,
        alignment: Alignment.centerLeft,
        child: TextField(
          style: TextStyle(
            textBaseline: TextBaseline.alphabetic,
            color: Colors.white,
            fontSize: 17,
            fontWeight: FontWeight.w400,
            decoration: TextDecoration.none,
          ),
          textAlignVertical: TextAlignVertical.center,
          decoration: InputDecoration(
            suffix: Icon(
              Icons.clear,
              color: Colors.red,
            ),
            suffixStyle: TextStyle(
              color: Theme.of(context).textTheme.bodyText1.color,
              fontWeight: FontWeight.w400,
              fontSize: 17,
              textBaseline: TextBaseline.ideographic,
            ),
            border: InputBorder.none,
            hintText: "Search",
          ),
        ),
      ),
    );

问题：

如何使输入文本和后缀垂直居中？

【参考方案1】：

将图标包裹在Transform.translate 中并为其设置propper 偏移量