如何用flutter_html包按HTML标签渲染自定义组件及自定义排版？

我来帮你解决flutter_html渲染HTML时的样式自定义和标签渲染问题，分两部分给你讲清楚：

一、为特定HTML标签设置专属字体与字号 #

如果你只是想给<b>这类标签设置不同的字体、字号，用style属性是最直接的方式，不用复杂的自定义渲染。你可以针对每个HTML标签单独配置样式，同时通过defaultTextStyle设置全局默认文本样式。

示例代码如下：

Html(
  data: """
    <div>
      <h1>Demo Page</h1>
      <p>This is a fantastic nonexistent product that you should buy!</p>
      <h2>Pricing</h2>
      <p>Lorem ipsum <b>dolor</b> sit amet.</p>
      <h2>The Team</h2>
      <p>There isn't <i>really</i> a team...</p>
      <h2>Installation</h2>
      <p>You <u>cannot</u> install a nonexistent product!</p>
    </div>
  """,
  padding: const EdgeInsets.all(8.0),
  backgroundColor: Colors.white70,
  // 设置全局默认文本样式（非粗体文本）
  defaultTextStyle: const TextStyle(
    fontFamily: 'Roboto', // 你的默认字体
    fontSize: 16,
  ),
  linkStyle: const TextStyle(
    color: Colors.redAccent,
  ),
  onLinkTap: (url) {
    // 处理链接点击逻辑
  },
  // 针对特定标签设置样式
  style: {
    // 给<b>标签设置粗体字体和更大字号
    'b': Style(
      fontFamily: 'Roboto-Bold', // 粗体字体
      fontSize: FontSize(20),
      fontWeight: FontWeight.bold,
    ),
    // 也可以给<p>标签单独设置样式，覆盖默认
    'p': Style(
      lineHeight: LineHeight(1.5),
    ),
  },
)

这里的Style类是flutter_html提供的样式封装，能直接对应CSS的常见样式属性，非常容易上手。

二、用customRender自定义标签渲染（修改字体为例） #

如果你需要更灵活的控制，比如完全替换某个标签的渲染Widget，就可以用customRender属性。它的核心逻辑是：判断当前渲染的HTML节点标签名，返回你自定义的Widget即可。

针对你需要的“根据标签名修改字体大小和家族”，实现代码如下：

import 'package:html/dom.dart' as dom;

// ... 其他代码

Html(
  data: """
    <div>
      <h1>Demo Page</h1>
      <p>This is a fantastic nonexistent product that you should buy!</p>
      <h2>Pricing</h2>
      <p>Lorem ipsum <b>dolor</b> sit amet.</p>
      <h2>The Team</h2>
      <p>There isn't <i>really</i> a team...</p>
      <h2>Installation</h2>
      <p>You <u>cannot</u> install a nonexistent product!</p>
    </div>
  """,
  padding: const EdgeInsets.all(8.0),
  backgroundColor: Colors.white70,
  defaultTextStyle: const TextStyle(
    fontFamily: 'Roboto',
    fontSize: 16,
  ),
  linkStyle: const TextStyle(
    color: Colors.redAccent,
  ),
  onLinkTap: (url) {
    // 处理链接点击逻辑
  },
  customRender: (node, children) {
    // 判断当前节点是否是HTML元素
    if (node is dom.Element) {
      // 根据标签名分支处理
      switch (node.localName) {
        case "b":
          // 给<b>标签返回自定义Text组件，设置字体和字号
          return Text(
            node.text,
            style: const TextStyle(
              fontFamily: 'Roboto-Bold',
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          );
        case "i":
          // 给<i>标签设置斜体字体
          return Text(
            node.text,
            style: const TextStyle(
              fontFamily: 'Roboto-Italic',
              fontSize: 16,
              fontStyle: FontStyle.italic,
            ),
          );
        // 其他需要自定义的标签可以继续添加case
      }
    }
    // 返回null表示让flutter_html用默认方式渲染该节点
    return null;
  },
)

注意事项： #

• 记得导入'package:html/dom.dart' as dom;，不然无法识别dom.Element类型。
• 如果返回null，flutter_html会回退到默认的渲染逻辑，不会影响其他标签的正常显示。
• children参数是当前标签的子节点，如果你的标签包含嵌套内容（比如<b>hello <i>world</i></b>），可以用children来组合渲染，比如返回RichText或者Column来包含子节点。

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