Flutter中如何获取TextField的当前高度或行数？

获取TextField的实际渲染高度 #

要获取TextField在不同设备上的实际高度，可通过GlobalKey绑定组件后获取其渲染对象的尺寸：

1. 定义全局Key

final GlobalKey _textFieldKey = GlobalKey();

2. 给目标TextField绑定该Key

TextField(
  key: _textFieldKey,
  keyboardType: TextInputType.multiline,
  minLines: 5,
  autofocus: true,
  controller: storyController,
  onChanged: (text) {
    onStoryTextChanged(text);
  },
  cursorColor: Colors.black,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.zero,
    fillColor: Colors.transparent,
    filled: true,
    border: InputBorder.none,
  ),
  style: textStyleNormalOnPaper,
),

3. 编写获取高度的方法

double getTextFieldHeight() {
  final renderBox = _textFieldKey.currentContext?.findRenderObject() as RenderBox?;
  return renderBox?.size.height ?? 0.0;
}

你可以在onChanged回调、按钮点击或其他需要的时机调用这个方法，拿到的就是TextField当前的实际渲染高度。

获取文本的实际行数 #

如果需要知道输入文本占据的行数，有两种可靠的实现方式：

方法1：用TextPainter模拟布局计算 #

通过TextPainter模拟文本在TextField中的布局，计算行数：

int calculateTextLineCount(String text, TextStyle style, double maxWidth) {
  final textPainter = TextPainter(
    text: TextSpan(text: text, style: style),
    textDirection: TextDirection.ltr,
    maxLines: null,
  )..layout(maxWidth: maxWidth);
  
  return textPainter.lineCount;
}

调用时需要传入TextField的可用宽度（比如屏幕宽度减去左右边距）和对应的文本样式：

onChanged: (text) {
  final availableWidth = MediaQuery.of(context).size.width;
  // 若TextField有左右padding，记得从availableWidth中扣除
  final lineCount = calculateTextLineCount(text, textStyleNormalOnPaper, availableWidth);
  // 在这里处理行数结果
},

方法2：通过RenderEditable直接获取 #

利用TextField内部的RenderEditable对象，直接获取文本布局的行数：

int getCurrentTextLines() {
  final renderObject = _textFieldKey.currentContext?.findRenderObject();
  if (renderObject is RenderEditable) {
    return renderObject.textLayout.getLineCount();
  }
  return 0;
}

注意：要确保组件已经完成渲染，建议在WidgetsBinding的帧回调中调用，或者在onChanged中延迟调用，避免获取不到渲染对象的情况：

WidgetsBinding.instance.addPostFrameCallback((_) {
  final lines = getCurrentTextLines();
  // 处理行数
});

内容的提问来源于stack exchange，提问作者laprof