Flutter带‘查看更多’文本组件：如何获取每行长度及第三行末尾偏移量

嘿，我懂你的困扰——硬编码截取50个字符太不灵活了，不同字体、屏幕宽度下每行能容纳的字符数差异很大，咱们得用更精准的方式来获取第三行的结束位置！

核心思路：利用TextPainter的行度量信息 #

Flutter的TextPainter提供了computeLineMetrics()方法，它能返回一个包含每行详细信息的LineMetrics列表。每个LineMetrics对象里的start和end属性，正好对应该行文本在原字符串中的起始、结束字符索引。我们只要拿到第三行（列表索引为2，因为从0开始计数）的end值，就能精准截取到第三行的末尾位置。

修改后的完整代码实现 #

下面是调整后的代码，替换你原来硬编码的截取逻辑：

class ExpandedTextState extends State<ExpandedTextWidget> {
  String firstHalf;
  String secondHalf;
  bool flag = true;

  @override
  void initState() {
    super.initState();
    // 重点：这里的文本样式要和实际显示的完全一致，否则计算结果会偏差
    final displayTextStyle = TextStyle(fontSize: 13, color: Colors.amber);
    TextPainter textPainter = TextPainter(
      text: TextSpan(text: widget.text, style: displayTextStyle),
      maxLines: 3,
      textDirection: TextDirection.ltr,
    );
    
    // 设置布局宽度：要和Widget实际可用宽度一致，这里减去左右各10的padding
    final availableWidth = MediaQuery.of(context).size.width - 20;
    textPainter.layout(maxWidth: availableWidth);

    if (textPainter.didExceedMaxLines) {
      final lineMetrics = textPainter.computeLineMetrics();
      // 确保存在第三行，避免索引越界
      if (lineMetrics.length >= 3) {
        // 第三行的结束字符索引
        final thirdLineEndIndex = lineMetrics[2].end;
        firstHalf = widget.text.substring(0, thirdLineEndIndex);
        secondHalf = widget.text.substring(thirdLineEndIndex);
      } else {
        firstHalf = widget.text;
        secondHalf = "";
      }
    } else {
      firstHalf = widget.text;
      secondHalf = "";
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
      child: secondHalf.isEmpty
          ? Text(
              firstHalf,
              style: TextStyle(fontSize: 13, color: Colors.amber),
            )
          : RichText(
              text: TextSpan(children: [
                TextSpan(
                  text: flag ? "$firstHalf..." : "$firstHalf$secondHalf",
                  style: TextStyle(fontSize: 13, color: Colors.amber),
                ),
                TextSpan(
                  text: flag ? " see more" : "",
                  style: TextStyle(fontSize: 13, color: Colors.black),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      setState(() {
                        flag = !flag;
                      });
                    },
                ),
              ]),
            ),
    );
  }
}

关键注意事项 #

• 样式一致性：必须保证TextPainter的textStyle和实际显示的文本样式（字体大小、字重、字体族等）完全匹配，不然计算出的行位置会和实际显示不符。
• 宽度适配：layout方法的maxWidth要设置为Widget的实际可用宽度，比如减去左右padding的值。如果在initState里拿不到context，可以把这部分逻辑移到didChangeDependencies方法中处理。
• 边界防护：虽然didExceedMaxLines为true时至少有3行，但还是加了索引判断，避免极端情况导致崩溃，增强代码健壮性。

这样修改后，你的“查看更多”功能就能精准匹配第三行的结尾，再也不用纠结硬编码的适配问题啦！

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