Flutter中CustomPaint高度适配：如何预计算文本渲染高度

嘿，这个问题我之前也碰到过！核心痛点就是CustomPaint的尺寸依赖父组件，但我们又需要先根据文本内容算出高度对吧？我来给你一套可行的解决方案：

问题根源 #

你之前在MyHtmlPainter构造函数里拿不到宽度，是因为CustomPaint的size要等到父组件确定后才会传递给paint方法。硬写height:550肯定不是长久之计，我们需要先根据可用宽度预计算文本高度，再让组件适配这个高度。

解决方案步骤 #

1. 重构MyHtmlPainter，专注绘制职责

把Paragraph的构建和布局逻辑从Painter里抽出来，让Painter只负责接收已经布局好的Paragraph并绘制，这样代码职责更清晰：

class MyHtmlPainter extends CustomPainter {
  final ui.Paragraph paragraph;

  MyHtmlPainter(this.paragraph);

  @override
  void paint(Canvas canvas, Size size) {
    // 直接绘制已布局好的段落
    canvas.drawParagraph(paragraph, Offset.zero);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // 只有当Paragraph变化时才重绘
    if (oldDelegate is MyHtmlPainter) {
      return paragraph != oldDelegate.paragraph;
    }
    return false;
  }
}

2. 使用LayoutBuilder获取可用宽度并预计算高度

LayoutBuilder能帮我们拿到父组件提供的约束（比如最大可用宽度），我们可以用这个宽度先布局Paragraph，算出准确的文本高度，再把高度传给CustomPaint：

Widget myHtmlWidget(List<dom.Element> spans, TextAlign ebookTextAlign) {
  return LayoutBuilder(
    builder: (context, constraints) {
      // 获取父组件允许的最大宽度
      final availableWidth = constraints.maxWidth;

      // 构建Paragraph并根据可用宽度布局
      final builder = ui.ParagraphBuilder(
        ui.ParagraphStyle(
          textDirection: ui.TextDirection.rtl,
          textAlign: ebookTextAlign,
          fontSize: ebookMainTextSize,
        ),
      )..pushStyle(ui.TextStyle(color: const ui.Color(0xFF000000)));

      spans.forEach((spn) {
        if (spn.localName == "p") {
          builder.addText("\n");
        }
        builder.addText(spn.text + " ");
      });
      builder.pop();

      final paragraph = builder.build()
        ..layout(ui.ParagraphConstraints(width: availableWidth));

      // 拿到文本的实际高度
      final textHeight = paragraph.height;

      // 让CustomPaint和子容器适配文本高度
      return CustomPaint(
        painter: MyHtmlPainter(paragraph),
        size: Size(availableWidth, textHeight),
        child: SizedBox(width: availableWidth, height: textHeight),
      );
    },
  );
}

为什么这样可行？ #

• LayoutBuilder会在父组件约束变化时自动重新执行builder逻辑，确保我们总能拿到最新的可用宽度。
• 先在LayoutBuilder里完成Paragraph的布局，就能直接获取paragraph.height，这就是文本在当前宽度下的准确高度。
• 把高度传给CustomPaint的size和SizedBox，整个组件就会自动适配文本内容，再也不用硬写固定高度了。

额外注意点 #

如果你的文本内容会动态变化（比如spans或文本样式改变），记得把这些变量放到State类里，触发组件重建时，LayoutBuilder会自动重新计算高度。

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