升级flutter_html至3.0.0-beta.2后EdgeInsets适配Margins/HtmlPaddings问题

flutter_html 3.0.0-beta.2版本重构了margin和padding的API，原来的EdgeInsets类型不再兼容，需要改用框架自定义的Margins和HtmlPaddings类，每个方向的间距值需要用对应的Margin或HtmlPadding对象包裹。

正确代码示例 #

修改你原有的Style配置部分：

class HTMLContent extends StatelessWidget {
  final String htmlCode;

  HTMLContent({required this.htmlCode});

  @override
  Widget build(BuildContext context) {
    return Html(
      data: htmlCode,
      style: {
        "p": Style(
          color: Theme.of(context).primaryColor,
          fontSize: pFontSize,
          fontFamily: 'Lato',
          textAlign: TextAlign.justify,
          // 替换原 EdgeInsets.only(bottom: 10.0)
          margin: const Margins(bottom: Margin(10.0)),
          lineHeight: const LineHeight(1.3),
        ),
        "th": Style(
          // 替换原 EdgeInsets.all(6)
          padding: const HtmlPaddings.all(HtmlPadding(6)),
          backgroundColor: Theme.of(context).primaryColorLight,
          color: Colors.white,
          fontFamily: 'Lato',
          fontSize: const FontSize(16),
        ),
      },
    );
  }
}

其他常用写法 #

和原EdgeInsets的用法逻辑一致，只需替换为对应类型包裹：

• 仅设置单方向间距：Margins(top: Margin(8.0))、HtmlPaddings(right: HtmlPadding(12.0))
• 对称设置水平/垂直间距：Margins.symmetric(vertical: Margin(6.0))、HtmlPaddings.symmetric(horizontal: HtmlPadding(10.0))
• 四个方向分别设置不同值：Margins(top: Margin(4.0), right: Margin(8.0), bottom: Margin(4.0), left: Margin(8.0))

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