TextField

焦点管理

在Flutter中TextField使用FocusNode管理焦点

FocusNode focusNode = FocusNode();

TextField(
          focusNode: focusNode,
        )

获取、取消焦点：

//获取
focusNode.requestFocus();
//取消
focusNode.unfocus();

取消所有焦点

FocusScope.of(viewService.context).requestFocus(FocusNode());

不使用FocusNode，自动获取焦点

TextField(
          autofocus: true,
        )

TextEditingController

TextEditingController继承自ValueNotifier。
是TextField的控制器，可以获取TextField的内容、设置TextField的内容。
也可以直接使用TextField的onChanged，可以直接获取内容。

TextField(
          onChanged: (value){
            
          },
         )

文字无法居中的问题

引用：https://mp.weixin.qq.com/s/2A9THwAFJyQPL7-Jgd-ZjA

给TextField 设置一个高度时，会导致文字不居中，这是因为contentPadding引起的

image.png

contentPadding的计算规则：

(TextField的高度 - 文字高度) / 2

重新设置contentPadding后

image.png

计算contentPadding代码如下⬇️

EdgeInsets _calculateContentPadding(TextStyle style, double height) {
    var textPainter = TextPainter(
      text: TextSpan(
        text:'',
        style: style,
      ),
      textDirection: TextDirection.ltr,
      textWidthBasis: TextWidthBasis.longestLine,
    )..layout();
    return EdgeInsets.symmetric(horizontal: 12,vertical: (height - textPainter.height) / 2);
  }

然而我发现当高度比较低时，只是单纯设置contentPadding还是轻微不居中，很细微，看3这个字符就能看出来

image.png

我重新设置了一下isCollapsed: true,可以了。

image.png

字数统计异常

https://mp.weixin.qq.com/s/2A9THwAFJyQPL7-Jgd-ZjA