Flutter如何正确统计Text组件的行数？

核心需求：准确统计Text组件的行数 #

之前用TextPainter统计不准的核心原因是没有获取到Text组件实际渲染时的真实可用宽度——尤其是当Text和其他组件处于同一Row/Column时，Text的布局宽度会被其他组件挤压，而手动给TextPainter设置的宽度往往和实际不符，导致行数计算偏差。

正确的做法是直接获取Text组件渲染后的RenderParagraph对象，它内部保存了实际布局后的行信息，统计结果100%准确。

实现步骤： #

1. 给需要统计的Text组件绑定GlobalKey，用于获取其RenderObject
2. 在布局完成后，从RenderParagraph的lineMetrics中提取行数
3. 将行数传递给计数器组件显示

示例代码： #

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class TextLineCounter extends StatefulWidget {
  final String text;
  final TextStyle? style;
  final Widget? counterWidget;

  const TextLineCounter({
    super.key,
    required this.text,
    this.style,
    this.counterWidget,
  });

  @override
  State<TextLineCounter> createState() => _TextLineCounterState();
}

class _TextLineCounterState extends State<TextLineCounter> {
  final GlobalKey _textKey = GlobalKey();
  int _lineCount = 0;

  @override
  void initState() {
    super.initState();
    // 布局完成后获取行数
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateLineCount());
  }

  @override
  void didUpdateWidget(covariant TextLineCounter oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.text != widget.text || oldWidget.style != widget.style) {
      WidgetsBinding.instance.addPostFrameCallback((_) => _updateLineCount());
    }
  }

  void _updateLineCount() {
    final renderObject = _textKey.currentContext?.findRenderObject();
    if (renderObject is RenderParagraph) {
      setState(() {
        _lineCount = renderObject.lineMetrics.length;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Text(
            widget.text,
            key: _textKey,
            style: widget.style,
          ),
        ),
        widget.counterWidget ?? Text("$_lineCount行"),
      ],
    );
  }
}

// 使用示例
class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("行数统计示例")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextLineCounter(
              text: "这是一段测试文本，当内容超过一行时会自动换行，统计的行数应该和实际显示一致。",
              style: const TextStyle(fontSize: 16),
            ),
            const SizedBox(height: 20),
            TextLineCounter(
              text: "短文本",
              counterWidget: Container(
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                decoration: BoxDecoration(
                  color: Colors.blueAccent,
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Text(
                  "$_lineCount行",
                  style: const TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

可选需求：避免为每个Text单独使用LayoutBuilder #

可以通过全局管理+InheritedWidget的方式，实现一次注册、统一统计，无需给每个Text单独套LayoutBuilder：

实现思路： #

1. 自定义一个LineCountManager，用于管理所有需要统计的Text的Key和行数
2. 用InheritedWidget将LineCountManager传递给子组件
3. 子Text组件只需注册自己的Key到Manager中，Manager统一监听布局变化并更新行数
4. 计数器组件直接从Manager中获取对应Text的行数

简化示例代码： #

// 全局行数管理类
class LineCountManager extends ChangeNotifier {
  final Map<Key, int> _lineCounts = {};

  int getLineCount(Key key) => _lineCounts[key] ?? 0;

  void updateLineCount(Key key, int count) {
    if (_lineCounts[key] != count) {
      _lineCounts[key] = count;
      notifyListeners();
    }
  }
}

// 继承组件传递Manager
class LineCountScope extends InheritedNotifier<LineCountManager> {
  const LineCountScope({
    super.key,
    required super.notifier,
    required super.child,
  });

  static LineCountManager of(BuildContext context) {
    final scope = context.dependOnInheritedWidgetOfExactType<LineCountScope>();
    assert(scope != null, "No LineCountScope found in context");
    return scope!.notifier!;
  }
}

// 可统计行数的Text组件
class CountableText extends StatefulWidget {
  final String text;
  final TextStyle? style;
  final Key? textKey;

  const CountableText({
    super.key,
    required this.text,
    this.style,
    this.textKey,
  });

  @override
  State<CountableText> createState() => _CountableTextState();
}

class _CountableTextState extends State<CountableText> {
  late final Key _textKey = widget.textKey ?? UniqueKey();
  late final LineCountManager _manager = LineCountScope.of(context);

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateLineCount());
  }

  @override
  void didUpdateWidget(covariant CountableText oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.text != widget.text || oldWidget.style != widget.style) {
      WidgetsBinding.instance.addPostFrameCallback((_) => _updateLineCount());
    }
  }

  void _updateLineCount() {
    final renderObject = context.findRenderObject();
    if (renderObject is RenderParagraph) {
      _manager.updateLineCount(_textKey, renderObject.lineMetrics.length);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      widget.text,
      key: _textKey,
      style: widget.style,
    );
  }
}

// 计数器组件
class LineCounter extends StatelessWidget {
  final Key textKey;
  final Widget Function(int count)? builder;

  const LineCounter({
    super.key,
    required this.textKey,
    this.builder,
  });

  @override
  Widget build(BuildContext context) {
    final manager = LineCountScope.of(context);
    return AnimatedBuilder(
      animation: manager,
      builder: (context, child) {
        final count = manager.getLineCount(textKey);
        return builder?.call(count) ?? Text("$count行");
      },
    );
  }
}

// 使用示例
class OptimizedDemoPage extends StatelessWidget {
  final Key _textKey1 = UniqueKey();
  final Key _textKey2 = UniqueKey();

  OptimizedDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return LineCountScope(
      notifier: LineCountManager(),
      child: Scaffold(
        appBar: AppBar(title: const Text("统一管理行数统计")),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                children: [
                  Expanded(
                    child: CountableText(
                      text: "这是一段较长的测试文本，会自动换行，计数器会准确显示实际行数。",
                      textKey: _textKey1,
                      style: const TextStyle(fontSize: 16),
                    ),
                  ),
                  LineCounter(textKey: _textKey1),
                ],
              ),
              const SizedBox(height: 20),
              Row(
                children: [
                  const Icon(Icons.text_fields),
                  const SizedBox(width: 8),
                  Expanded(
                    child: CountableText(
                      text: "和其他组件同行的Text，行数统计依然准确",
                      textKey: _textKey2,
                    ),
                  ),
                  LineCounter(
                    textKey: _textKey2,
                    builder: (count) => Badge(
                      label: Text(count.toString()),
                      child: const Icon(Icons.info),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键说明： #

• 用RenderParagraph获取行数是最可靠的方式，因为它是Text组件实际渲染后的对象，包含真实的布局信息
• 全局管理方式通过InheritedWidget和ChangeNotifier实现了状态共享，无需每个Text单独处理布局监听
• 当Text内容或布局变化时，通过addPostFrameCallback确保在布局完成后再更新行数，避免获取到未布局的空数据

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