Flutter RichText图文混排maxLines限制下图标被遮挡问题求助

方案一：用Row+Expanded拆分文本与图标 #

把文本和图标拆成独立区域，让文本部分单独处理省略逻辑，图标始终固定在末尾，这是最简单高效的实现方式。

修改后的代码：

class TextHighlight extends StatelessWidget {
  final TextStyle? style;
  final TextStyle? highlightStyle;
  final String content;
  final String? keyWord;
  final int? maxLines;
  final Widget? childTag;

  const TextHighlight({
    super.key,
    required this.content,
    this.keyWord,
    this.style,
    this.highlightStyle,
    this.maxLines,
    this.childTag,
  });

  @override
  Widget build(BuildContext context) {
    List<InlineSpan> spans = [];
    int start = 0;
 
    spans.add(TextSpan(text: content.substring(start, content.length), style: style ?? GlobalStyleConfig.normalStyle));

    return Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Expanded(
          child: RichText(
            maxLines: maxLines ?? 2,
            overflow: TextOverflow.ellipsis,
            text: TextSpan(children: spans),
          ),
        ),
        if (childTag != null)
          Padding(
            padding: const EdgeInsets.only(left: 4.0), // 可根据需求调整图标与文本的间距
            child: childTag!,
          ),
      ],
    );
  }
}

核心逻辑： #

• 用Row分隔文本区和图标区，Expanded让文本占据除图标外的剩余空间
• 文本部分的RichText单独触发省略，不会影响后续的图标显示
• 可选添加Padding优化文本与图标之间的视觉间距

方案二：自定义计算文本长度，手动截断后拼接图标 #

如果必须用单个RichText实现，可通过TextPainter计算文本在指定空间内的可显示长度，手动截断文本后再添加图标。

示例代码：

class TextHighlight extends StatelessWidget {
  final TextStyle? style;
  final TextStyle? highlightStyle;
  final String content;
  final String? keyWord;
  final int? maxLines;
  final Widget? childTag;

  const TextHighlight({
    super.key,
    required this.content,
    this.keyWord,
    this.style,
    this.highlightStyle,
    this.maxLines,
    this.childTag,
  });

  @override
  Widget build(BuildContext context) {
    final textStyle = style ?? GlobalStyleConfig.normalStyle;
    final targetMaxLines = maxLines ?? 2;
    List<InlineSpan> spans = [];

    if (childTag != null) {
      // 计算图标占用宽度（需根据实际图标组件调整，这里假设是SizedBox包裹的图标）
      final iconWidth = (childTag as SizedBox).width ?? 16;
      final screenWidth = MediaQuery.of(context).size.width;
      final textAvailableWidth = screenWidth - iconWidth - 8; // 减去图标宽度和预留间距

      // 用TextPainter计算文本可显示范围
      final textPainter = TextPainter(
        text: TextSpan(text: content, style: textStyle),
        maxLines: targetMaxLines,
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: textAvailableWidth);

      // 获取截断位置并拼接省略号
      final truncatePosition = textPainter.getPositionForOffset(Offset(textAvailableWidth, 0));
      final truncatedText = content.substring(0, truncatePosition.offset) + '...';

      spans.add(TextSpan(text: truncatedText, style: textStyle));
      spans.add(WidgetSpan(child: childTag!));
    } else {
      spans.add(TextSpan(text: content, style: textStyle));
    }

    return RichText(
      maxLines: targetMaxLines,
      overflow: TextOverflow.visible, // 已手动截断，无需自动省略
      text: TextSpan(children: spans),
    );
  }
}

核心逻辑： #

• 先计算图标占用的宽度，得出文本可使用的显示空间
• 通过TextPainter定位文本截断位置，手动添加省略号
• 最后将截断后的文本与图标拼接成InlineSpan，确保图标能正常显示

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