如何在 Flutter 中将多个 HtmlWidget 元素内联组合为一段文本

本文介绍如何将多个 htmlwidget 渲染的 html 内容（如词典词条与注音）合并到同一段落中，消除默认换行，实现自然的内联排版效果。核心方法是预处理 html 字符串，移除干扰内联布局的 `

` 标签，并通过自定义 `

` 包裹合并后的内容。

在使用 flutter_html 或类似 HTML 渲染插件（如 html_widget）构建词典类应用时，常需将词条（如 tina）与其注音或释义（如 itavi）并排显示于同一语句中，例如：“kava [kaˈva]”。但直接连续放置多个 HtmlWidget 实例往往会导致换行——这是因为原始 HTML 字符串中隐含或自动生成了

标签，而 HtmlWidget 默认将

渲染为块级元素，强制独占一行。

解决的关键在于控制 HTML 结构层级：不依赖多个独立 HtmlWidget，而是将内容预处理后合并为单个 HTML 字符串，再交由一个 HtmlWidget 渲染。以下是一个稳健、可复用的封装函数：

Widget mergeHtml(String html1, String html2) {
  // 移除输入 HTML 中可能存在的 
 和 
 标签（避免嵌套块级结构）
  final cleanHtml1 = html1.replaceAll(RegExp(r'<\/?p[^>]*>'), '');
  final cleanHtml2 = html2.replaceAll(RegExp(r'<\/?p[^>]*>'), '');

  // 构建内联段落：统一字体大小，添加空格与方括号分隔
  final mergedHtml = '''
    

      $cleanHtml1  [$cleanHtml2]
    
  ''';

  return HtmlWidget(mergedHtml);
}

调用方式简洁明了：

mergeHtml(
  allwordlist![0].tina.toString(),
  allwordlist![0].itavi.toString(),
)

⚠️ 注意事项：

• 使用 RegExp(r']*>') 替代简单字符串替换，可匹配带属性的

  或

  等变体，提升鲁棒性；

• 添加 margin: 0 和 display: inline 样式确保段落自身不引入额外间距或换行；
•   保证词条与注音间有不可断行的空格，比普通空格更可靠；
• 若原始 HTML 含复杂结构（如嵌套 、列表等），建议先用轻量 HTML 解析器（如 html 包）提取纯文本，再构造安全内联 HTML，避免 XSS 风险。

  此方案兼顾灵活性与可控性，无需修改底层渲染逻辑，即可精准实现“一句话式”双元素内联展示，特别适合词典、术语表、语法标注等场景。