Flutter：带宽度限制的TextField自动换行后行数统计异常求助

你的问题核心在于：自动换行是TextField渲染层的视觉处理，文本内容本身并没有添加\n换行符，所以通过split('\n')只能识别手动输入的换行，无法统计自动换行的行。

要准确统计实际显示的行数，可使用Flutter提供的TextPainter来计算文本布局后的行数，具体实现如下：

1. 核心实现逻辑 #

利用TextPainter模拟TextField的文本渲染环境（匹配相同的字体样式、宽度约束），通过其布局计算能力获取实际的行数量。

2. 完整代码示例 #

import 'package:flutter/material.dart';

class LineCountTextField extends StatefulWidget {
  const LineCountTextField({super.key});

  @override
  State<LineCountTextField> createState() => _LineCountTextFieldState();
}

class _LineCountTextFieldState extends State<LineCountTextField> {
  final TextEditingController _textController = TextEditingController();
  final TextStyle _inputTextStyle = const TextStyle(fontSize: 16, height: 1.5); // 和TextField样式保持一致
  double _textFieldMaxWidth = 300; // TextField的实际宽度，根据你的布局调整
  int _actualLineCount = 0;

  @override
  void initState() {
    super.initState();
    // 监听文本变化，实时计算行数
    _textController.addListener(_calculateActualLineCount);
  }

  void _calculateActualLineCount() {
    final inputText = _textController.text;
    if (inputText.isEmpty) {
      setState(() => _actualLineCount = 0);
      return;
    }

    // 创建TextPainter并配置渲染参数
    final textPainter = TextPainter(
      text: TextSpan(text: inputText, style: _inputTextStyle),
      textDirection: TextDirection.ltr,
      maxLines: null, // 允许无限换行
    )..layout(maxWidth: _textFieldMaxWidth); // 应用TextField的宽度约束

    // 通过computeLineMetrics获取所有行的信息，统计数量
    setState(() {
      _actualLineCount = textPainter.computeLineMetrics().length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextField(
          controller: _textController,
          style: _inputTextStyle,
          maxLines: null, // 允许自动换行
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            hintText: "输入内容测试自动换行",
          ),
          constraints: BoxConstraints(maxWidth: _textFieldMaxWidth),
        ),
        const SizedBox(height: 16),
        Text("实际显示行数：$_actualLineCount"),
      ],
    );
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }
}

3. 关键注意点 #

• 确保TextPainter的TextStyle和TextField的style完全一致（包括字号、字体、行高、字间距等），否则计算的行数会和实际显示不符。
• _textFieldMaxWidth要设置为TextField的实际可渲染宽度，比如如果TextField是自适应父容器，可通过MediaQuery或LayoutBuilder获取准确宽度。

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