Flutter安全解析HTML插件flutter_html_null_safe的使用

Flutter安全解析HTML插件flutter_html_null_safe的使用

flutter_html介绍

flutter_html 是一个用于在Flutter应用程序中渲染HTML和CSS内容的插件。它提供了丰富的功能来处理各种HTML标签和CSS属性。

Widget build(context) {
  return Html(
    data: """
        <h1>Hello, World!</h1>
        <p><span style="font-style:italic;">flutter_html</span> supports a variety of HTML and CSS tags and attributes.</p>
        <p>Over a hundred static tags are supported out of the box.</p>
        <p>Or you can even define your own using an <code>Extension</code>: <flutter></flutter></p>
        <p>Its easy to add custom styles to your Html as well using the <code>Style</code> class:</p>
        <p class="fancy">Here's a fancy <p> element!</p>
        """,
    extensions: [
      TagExtension(
        tagsToExtend: {"flutter"},
        child: const FlutterLogo(),
      ),
    ],
    style: {
      "p.fancy": Style(
        textAlign: TextAlign.center,
        padding: const EdgeInsets.all(16),
        backgroundColor: Colors.grey,
        margin: Margins(left: Margin(50, Unit.px), right: Margin.auto()),
        width: Width(300, Unit.px),
        fontWeight: FontWeight.bold,
      ),
    },
  );
}

上述代码将生成以下效果：

目录

• 支持的HTML标签
• 支持的CSS属性
• 为什么选择flutter_html？
• 迁移指南
• API参考
  • 构造函数
  • 参数表
• 外部包
  • flutter_html_all
  • flutter_html_audio
  • flutter_html_iframe
  • flutter_html_math
  • flutter_html_svg
  • flutter_html_table
  • flutter_html_video
• 常见问题
• 示例

为什么选择flutter_html？

该插件旨在简化HTML内容到Flutter widget树的基本渲染过程。它不仅支持基本样式，还提供了一系列扩展API，以实现对widget渲染的极细粒度控制。

迁移指南

3.0.0迁移指南

API参考

要查看完整的API参考，请访问 这里。

构造函数

该插件目前有两个不同的构造函数 - Html() 和 Html.fromDom()。

• Html() 构造函数适用于那些希望直接从源传递HTML给插件进行渲染的用户。
• 如果你需要在渲染之前修改或清理HTML，那么应该使用 Html.fromDom()。你可以将HTML字符串转换为 Document，然后使用其方法来修改HTML，最后将修改后的 Document 直接传递给插件。这避免了重新解析修改后的 Document 并将其转换回字符串再传递给 Html() 的步骤，从而减少了加载时间。

参数表

更多示例和详细信息，请参阅：

• 如何使用Style
• 如何使用HtmlExtension

外部包

flutter_html_all

这是一个方便的包，导出了所有其他外部包。如果你打算渲染所有需要外部依赖的标签，应该使用这个包。

flutter_html_audio

该包使用 chewie_audio 和 video_player 插件渲染音频元素。

该包考虑了以下属性：controls、loop、src、autoplay、width 和 muted。

添加AudioHtmlExtension

在 pubspec.yaml 中添加依赖：

flutter pub add flutter_html_audio

然后在你的代码中导入并使用：

import 'package:flutter_html_audio/flutter_html_audio';

Widget html = Html(
  data: myHtml,
  extensions: [
    AudioHtmlExtension(),
  ],
);

flutter_html_iframe

该包使用 webview_flutter 插件渲染iframe。

在渲染iframe时，该包考虑了宽度、高度和sandbox属性。

Sandbox 控制webview的JavaScript模式 - null 或 allow-scripts 将设置 javascriptMode: JavascriptMode.unrestricted，否则将设置 javascriptMode: JavascriptMode.disabled。

添加IframeHtmlExtension

在 pubspec.yaml 中添加依赖：

flutter pub add flutter_html_iframe

然后在你的代码中导入并使用：

import 'package:flutter_html_iframe/flutter_html_iframe';

Widget html = Html(
  data: myHtml,
  extensions: [
    IframeHtmlExtension(),
  ],
);

你可以通过 IframeHtmlExtension 的 navigationDelegate 属性设置webview的 navigationDelegate。这允许你阻止或允许某些URL的加载。

flutter_html_math

该包使用 flutter_math_fork 插件渲染MathML元素。

在渲染MathML时，该包会尝试将MathML数据内的 <math> 标签解析为Tex，然后将其传递给 flutter_math_fork。

因为该包将MathML解析为Tex，可能不支持一些功能。当前支持的标签列表可以在 Wiki 上找到，但其中一些标签目前只部分支持。

添加MathHtmlExtension

在 pubspec.yaml 中添加依赖：

flutter pub add flutter_html_math

然后在你的代码中导入并使用：

import 'package:flutter_html_math/flutter_html_math';

Widget html = Html(
  data: myHtml,
  extensions: [
    MathHtmlExtension(),
  ],
);

如果解析出错，你可以使用 MathHtmlException 的 onMathErrorBuilder 属性来捕获错误，并在你的端上尝试修复它。

该函数会暴露解析后的Tex字符串以及来自 flutter_math_fork 的错误和错误类型。

你可以分析错误和解析后的字符串，并最终返回一个新的 Math.tex() 实例，其中包含修正后的Tex字符串。

Tex

如果你想在HTML中渲染Tex字符串，可以使用相同的 flutter_math_fork 插件。

在HTML中使用自定义标签（例如 <tex>），并将原始的Tex字符串放在里面。

然后，使用 extensions 参数添加渲染Tex的小部件。它看起来像这样：

Widget htmlWidget = Html(
  data: r"""<tex>i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)</tex>""",
  extensions: [
    TagExtension(
      tagsToExtend: {"tex"},
      builder: (extensionContext) {
        return Math.tex(
          extensionContext.innerHtml,
          mathStyle: MathStyle.display,
          textStyle: extensionContext.styledElement?.style.generateTextStyle(),
          onErrorFallback: (FlutterMathException e) {
            // 你可以在这里尝试纠正Tex字符串
            return Text(e.message);
          },
        );
      }
    ),
  ],
);

flutter_html_svg

该包使用 flutter_svg 插件渲染SVG元素。

在渲染SVG时，该包会将 <svg> 标签内的SVG数据传递给 flutter_svg。如果提供了，则会考虑宽度和高度属性。

该包还提供了几种在 <img> 标签内渲染SVG的方法，特别是base64 SVG、资产SVG和网络SVG。

添加SvgHtmlExtension

在 pubspec.yaml 中添加依赖：

flutter pub add flutter_html_svg

然后在你的代码中导入并使用：

import 'package:flutter_html_svg/flutter_html_svg';

Widget html = Html(
  data: myHtml,
  extensions: [
    SvgHtmlExtension(),
  ],
);

flutter_html_table

该包使用 flutter_layout_grid 插件渲染表格元素。

在渲染表格元素时，该包会尝试计算每个元素的最佳拟合大小，并相应地调整其单元格大小。考虑到了 <rowspan> 和 <colspan>，所以跨越多个行和列的单元格将按预期渲染。高度会根据最佳比例确定，以保持单元格的最佳纵横比。

添加TableHtmlExtension

在 pubspec.yaml 中添加依赖：

flutter pub add flutter_html_table

然后在你的代码中导入并使用：

import 'package:flutter_html_table/flutter_html_table';

Widget html = Html(
  data: myHtml,
  extensions: [
    TableHtmlExtension(),
  ],
);

flutter_html_video

该包使用 chewie 和 video_player 插件渲染视频元素。

该包考虑了以下属性：controls、loop、src、autoplay、poster、width、height 和 muted。

添加VideoHtmlExtension

在 pubspec.yaml 中添加依赖：

flutter pub add flutter_html_video

然后在你的代码中导入并使用：

import 'package:flutter_html_video/flutter_html_video';

Widget html = Html(
  data: myHtml,
  extensions: [
    VideoHtmlExtension(),
  ],
);

常见问题

为什么我看不到 <audio>/<iframe>/<math>/<svg>/<table>?

你是否按照上述说明操作了？

如果是，请随时提出问题或开始讨论以获取额外的帮助。

如何在我的HTML中渲染LaTeX？

请参阅上面的示例。

如何在我的 Row() 中使用此组件？

如果你想在 Row() 中使用此组件，确保设置了 shrinkWrap: true 并将组件放置在 Expanded 中：

Widget row = Row(
   children: [
        Expanded(
            child: Html(
              shrinkWrap: true,
              // 其他参数
            )
        ),
        // 其他组件
   ]
);