本文介绍如何在 flutter 中通过预处理 html 字符串、移除默认换行标签（如 `
`），并手动构建内联段落，实现多个 htmlwidget 元素在同一行中自然衔接显示。
在开发 Flutter 字典类应用时，常需渲染富文本（如带格式的释义、音标或例句），flutter_html 或 html_widget 等库提供了便捷的 HtmlWidget 组件。但默认情况下，HTML 字符串若包含
标签，会被渲染为块级元素，导致相邻 HtmlWidget 实例强制换行——即使你希望它们像普通句子一样内联排列（例如：“词根 [IPA]”）。
解决的关键在于：控制 HTML 语义结构，而非依赖多个独立的 HtmlWidget 并列布局。Flutter 的 Row 或 Wrap 对 HtmlWidget 的内联对齐支持有限（因其内部已封装完整 DOM 渲染逻辑），更可靠的方式是合并 HTML 字符串，在单个 HtmlWidget 中统一渲染。
以下是一个经过验证的实用方案：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
Widget mergeHtml(String html1, String html2) {
// 移除原始 HTML 中可能存在的 <p> 和 </p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 标签（避免嵌套段落导致换行）
final cleanHtml1 = html1.replaceAll(RegExp(r'<\/?p[^>]*>'), '');
final cleanHtml2 = html2.replaceAll(RegExp(r'<\/?p[^>]*>'), '');
// 构建内联段落：使用 <p> 包裹整体，并添加内联样式（可选 font-size、line-height 等）
final mergedHtml = '<p style="font-size:18px; margin:0; display:inline;">'
'$cleanHtml1 <span style="margin:0 4px;">[</span>'
'$cleanHtml2<span style="margin:0 4px;">]</span></p>';
return HtmlWidget(mergedHtml);
}调用方式（确保字段非空）：
mergeHtml( allwordlist![0].tina ?? '', allwordlist![0].itavi ?? '', )
✅ 注意事项：
- 使用 RegExp(r']*>') 替代简单字符串替换，可兼容带属性的
；
- margin:0 和 display:inline 是防止段落默认外边距与块级行为的关键 CSS；
- 若需更复杂排版（如不同颜色、下划线、点击响应），建议在 中添加 style 或 class，并通过 customStylesBuilder 配置 HtmlWidget；
- 始终对 allwordlist![0].xxx 做空值检查（如 ?? ''），避免运行时异常。
该方法轻量、可控，无需引入额外布局组件，完美适配字典场景中“词条 + 音标”“原形 + 词性”等高频内联需求。
