flutter_html_all包display:flex不生效，元素无法横向排列问题求助

问题描述 #

使用flutter_html_all: ^3.0.0-alpha.5渲染HTML时，遇到两个核心问题：

• 设置display:flex或inline-block无法让元素横向排列，所有元素默认纵向堆叠
• 给display:block元素设置width CSS属性完全不生效

复现用HTML代码 #

<section>
  <div style="margin-bottom: 32px">
    <h2 style="margin-top: 0; margin-bottom: 8px; font-size: 24px; color: #232323">
      Your overall asset is split between debt, equity, gold and US equity
    </h2>
  </div>
  <div style="background-color: #faf9fb;padding-bottom: 16px;margin-bottom: 24px;">
    <div style="display: flex">
      <div style="background-color: #A28CFE; height: 2px; width: 67%">&nbsp;</div>
      <div style="background-color: #FEAB8C; height: 2px; width: 17%">&nbsp;</div>
      <div style="background-color: #FECE8C; height: 2px; width: 10%">&nbsp;</div>
    </div>
    <div style="display: flex; padding: 16px;width: 100%;">
      <div style="display: flex; margin-right: 24px;">
        <div style="width: 15px;height: 15px;background-color: #A28CFE;">&nbsp;</div>
        <div style="font-size: 14px;font-weight: 500;color: #2c2747;margin-left: 8px;">
          Debt
          <div style="color: #6b677e; font-size: 12px">867.5540297163441%</div>
        </div>
      </div>
      <div style="display: flex; margin-right: 24px;">
        <div style="width: 15px;height: 15px;background-color: #FEAB8C;">&nbsp;</div>
        <div style="font-size: 14px;font-weight: 500;color: #2c2747;margin-left: 8px;">
          Equity
          <div style="color: #6b677e; font-size: 12px">517.1431787483116%</div>
        </div>
      </div>
      <div style="display: flex; margin-right: 24px;">
        <div style="width: 15px;height: 15px;background-color: #FECE8C;">&nbsp;</div>
        <div style="font-size: 14px;font-weight: 500;color: #2c2747;margin-left: 8px;">
          Gold
          <div style="color: #6b677e; font-size: 12px">100%</div>
        </div>
      </div>
    </div>
  </div>
</section>

当前Html组件配置 #

Html(data: page.html)

效果对比 #

• 预期效果：顶部进度条由三个不同颜色的横向色块拼接而成；下方资产标签（Debt/Equity/Gold）横向排列，每个标签内颜色块与文字横向对齐，整体布局紧凑有序。
• 实际效果：进度条的三个色块纵向堆叠；资产标签也逐个纵向排列，所有宽度设置均未生效，布局完全错乱。

环境信息 #

Flutter 2.10.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 097d3313d8 (8个月前) • 2022-02-18 19:33:08 -0600
Engine • revision a83ed0e5e3
Tools • Dart 2.16.1 • DevTools 2.9.2
flutter_html_all: ^3.0.0-alpha.5

解决方案 #

1. 正确注册flutter_html_all的扩展 #

flutter_html_all的alpha版本需要手动注册所有扩展，否则Flex布局等CSS特性不会生效。修改Html组件的初始化代码：

Html(
  data: page.html,
  extensions: [
    ...HtmlAllExtensions(), // 注册所有html_all提供的扩展
  ],
)

2. 升级依赖版本 #

你使用的flutter_html_all: ^3.0.0-alpha.5是早期测试版本，存在较多兼容性问题。建议升级到稳定版：

• 修改pubspec.yaml中的依赖：

  flutter_html_all: ^3.0.0 # 或最新稳定版
  

• 执行flutter pub get更新依赖

3. 适配Flutter版本 #

你的Flutter版本是2.10.2，属于较旧的稳定版，与新版本的flutter_html_all可能存在兼容性问题。建议升级Flutter到最新稳定版：

flutter upgrade

4. 替代方案：直接使用flutter_html并按需添加扩展 #

如果升级后仍有问题，可以放弃flutter_html_all，只引入需要的扩展，减少兼容性问题：

dependencies:
  flutter_html: ^3.0.0
  html: ^0.15.0
  flutter_html_layout: ^3.0.0 # 提供Flex布局支持

然后在代码中注册：

Html(
  data: page.html,
  extensions: [
    LayoutHtmlExtension(), // 仅注册布局相关扩展
  ],
)

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