Flutter中使用flutter_html显示HTML表格时出现内容溢出问题

问题场景 #

在Flutter应用中使用flutter_html依赖显示HTML表格时，出现了表格内容横向溢出屏幕的问题。

待渲染的HTML代码 #

<p>Destruction of the<strong> ciliary ganglion</strong> interrupts <strong>postganglionic parasympathetic fibers</strong>, which innervate the sphincter pupillae and ciliaris; this results in-</p>
<ul>
<li><strong>loss of the direct pupillary reflex, </strong></li>
<li><strong>mydriasis, and </strong></li>
<li><strong>loss of accommodation.</strong></li>
</ul>
<p><strong>TREASURE</strong></p>
<table>
<tbody>
<tr>
<td><p><strong>Ganglion </strong></p></td>
<td><p><strong>Topographically Related To </strong></p></td>
<td><p><strong>Functionally Related To </strong></p></td>
<td><p><strong>Supplies </strong></p></td>
</tr>
<tr>
<td><p><strong>Otic</strong></p></td>
<td><p>Mandibular nerve&nbsp;</p></td>
<td><p>Glossopharyngeal nerve&nbsp;</p></td>
<td><p>Parotid gland</p></td>
</tr>
<tr>
<td><p><strong>Pterygopalatine</strong></p></td>
<td><p>Maxillary nerve&nbsp;</p></td>
<td><p>Greater petrosal nerve&nbsp;</p></td>
<td><p>Lacrimal, nasal, palatine, pharyngeal glands</p></td>
</tr>
<tr>
<td><p><strong>Submandibular</strong></p></td>
<td><p>Lingual nerve</p></td>
<td><p>Chorda tympani nerve</p></td>
<td><p>Submandibular and sublingual glands</p></td>
</tr>
<tr>
<td><p><strong>Ciliary</strong></p></td>
<td><p>Nasociliary nerve</p></td>
<td><p>Oculomotor nerve</p></td>
<td><p>Ciliaris</p>
<p>Sphincter and dilator pupillae</p></td>
</tr>
</tbody>
</table>

当前使用的Flutter代码 #

Html(
    data: htmlText,
    style: {
        "table": Style(),
        "tr": Style(
        border:
          Border(bottom: BorderSide(color: Colors.grey)),
        ),
        "th": Style(
        padding: EdgeInsets.all(6),
        backgroundColor: Colors.grey,
        ),
        "td": Style(
        padding: EdgeInsets.all(2),
        alignment: Alignment.topLeft,
        ),
    }
)

问题效果 #

解决方案 #

方法1：添加横向滚动容器 #

将Html组件嵌套在SingleChildScrollView中，允许表格横向滚动，避免内容溢出：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Html(
    data: htmlText,
    style: {
      "table": Style(
        border: Border.all(color: Colors.grey.shade300),
      ),
      "tr": Style(
        border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
      ),
      "td": Style(
        padding: EdgeInsets.all(8),
        alignment: Alignment.topLeft,
      ),
    },
  ),
)

方法2：设置单元格文本自动换行 #

通过给td标签配置换行样式，让单元格内的长文本自动折行，减少横向宽度：

Html(
  data: htmlText,
  style: {
    "table": Style(
      width: Width(100, Unit.percent), // 让表格占满可用宽度
    ),
    "tr": Style(
      border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
    ),
    "td": Style(
      padding: EdgeInsets.all(8),
      alignment: Alignment.topLeft,
      whiteSpace: WhiteSpace.normal, // 启用文本自动换行
      maxLines: null, // 取消行数限制
    ),
  },
)

方法3：滚动+换行结合（推荐） #

对于宽表格，同时启用横向滚动和单元格换行，兼顾内容可读性和完整展示：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: SizedBox(
    width: MediaQuery.of(context).size.width, // 确保表格至少占满屏幕宽度
    child: Html(
      data: htmlText,
      style: {
        "table": Style(
          border: Border.all(color: Colors.grey.shade300),
        ),
        "tr": Style(
          border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
        ),
        "td": Style(
          padding: EdgeInsets.all(8),
          alignment: Alignment.topLeft,
          whiteSpace: WhiteSpace.normal,
        ),
      },
    ),
  ),
)

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