Flutter HTML渲染插件flutter_html_v3的使用

Flutter HTML渲染插件flutter_html_v3的使用

简介

flutter_html 是一个用于将HTML和CSS渲染为Flutter小部件的库。它支持多种HTML标签和CSS属性，并允许开发者自定义渲染行为。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter_html: ^3.0.0-alpha.5
  // 或者
  // flutter_html_all: ^3.0.0-alpha.5 包括表格、视频、音频、iframe等

支持的HTML标签

支持的CSS属性

支持的内联CSS属性

使用示例

数据参数

Widget html = Html(
  data: """
    <div>
      <h1>Demo Page</h1>
      <p>This is a fantastic product that you should buy!</p>
      <h3>Features</h3>
      <ul>
        <li>It actually works</li>
        <li>It exists</li>
        <li>It doesn't cost much!</li>
      </ul>
      <!--You can pretty much put any html in here!-->
    </div>
  """,
);

文档参数

import 'package:html/parser.dart' as htmlparser;
import 'package:html/dom.dart' as dom;

String htmlData = """
  <div>
    <h1>Demo Page</h1>
    <p>This is a fantastic product that you should buy!</p>
    <h3>Features</h3>
    <ul>
      <li>It actually works</li>
      <li>It exists</li>
      <li>It doesn't cost much!</li>
    </ul>
    <!--You can pretty much put any html in here!-->
  </div>
""";
dom.Document document = htmlparser.parse(htmlData);

Widget html = Html(
  document: document,
);

链接点击事件

Widget html = Html(
  data: """
    <p>
     Linking to <a href='https://github.com'>websites</a> has never been easier.
    </p>
  """,
  onLinkTap: (String? url, RenderContext context, Map<String, String> attributes, dom.Element? element) {
    // 打开URL到WebView，或者在浏览器中打开URL，或者其他逻辑
  }
);

自定义渲染

Widget html = Html(
  data: """
    <h3>Display bird element and flutter element <bird></bird></h3>
    <flutter></flutter>
    <flutter horizontal></flutter>
  """,
  customRenders: {
    birdMatcher(): CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => TextSpan(text: "🐦")),
    flutterMatcher(): CustomRender.widget(widget: (context, buildChildren) => FlutterLogo(
      style: (context.tree.element!.attributes['horizontal'] != null)
          ? FlutterLogoStyle.horizontal
          : FlutterLogoStyle.markOnly,
      textColor: context.style.color!,
      size: context.style.fontSize!.size! * 5,
    )),
  },
  tagsList: Html.tags..addAll(["bird", "flutter"]),
);

CustomRenderMatcher birdMatcher() => (context) => context.tree.element?.localName == 'bird';

CustomRenderMatcher flutterMatcher() => (context) => context.tree.element?.localName == 'flutter';

图片加载错误处理

Widget html = Html(
  data: """
    <img alt='Alt Text of an intentionally broken image' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30d'/>
  """,
  onImageError: (Exception exception, StackTrace stackTrace) {
    FirebaseCrashlytics.instance.recordError(exception, stackTrace);
  },
);

图片点击事件

Widget html = Html(
  data: """
    <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
  """,
  onImageTap: (String? url, RenderContext context, Map<String, String> attributes, dom.Element? element) {
    // 打开图片到WebView，或者在浏览器中打开图片，或者其他逻辑
  }
);

渲染指定标签

Widget html = Html(
  data: """
    <p>Render this item</p>
    <span>Do not render this item or any other item</span>
    <img src='https://flutter.dev/images/flutter-mono-81x100.png'/>
  """,
  tagsList: ['p']
);

自定义样式

Widget html = Html(
  data: """
    <h1>Table support:</h1>
    <table>
      <colgroup>
        <col width="50%" />
        <col span="2" width="25%" />
      </colgroup>
      <thead>
        <tr><th>One</th><th>Two</th><th>Three</th></tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan='2'>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan</td><td>Data</td><td>Data</td>
        </tr>
        <tr>
          <td colspan="2"><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></td>
        </tr>
      </tbody>
      <tfoot>
        <tr><td>fData</td><td>fData</td><td>fData</td></tr>
      </tfoot>
    </table>
  """,
  style: {
    // 表格背景颜色
    "table": Style(
      backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
    ),
    // 表格行边框
    "tr": Style(
      border: Border(bottom: BorderSide(color: Colors.grey)),
    ),
    // 表头单元格样式
    "th": Style(
      padding: EdgeInsets.all(6),
      backgroundColor: Colors.grey,
    ),
    // 单元格对齐方式
    "td": Style(
      padding: EdgeInsets.all(6),
      alignment: Alignment.topLeft,
    ),
    // h1元素文本颜色
    "h1": Style(color: Colors.red),
  }
);

自定义渲染示例

自定义HTML标签

Widget html = Html(
  data: """
    <h3>Display bird element and flutter element <bird></bird></h3>
    <flutter></flutter>
    <flutter horizontal></flutter>
  """,
  customRenders: {
    birdMatcher(): CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => TextSpan(text: "🐦")),
    flutterMatcher(): CustomRender.widget(widget: (context, buildChildren) => FlutterLogo(
      style: (context.tree.element!.attributes['horizontal'] != null)
          ? FlutterLogoStyle.horizontal
          : FlutterLogoStyle.markOnly,
      textColor: context.style.color!,
      size: context.style.fontSize!.size! * 5,
    )),
  },
  tagsList: Html.tags..addAll(["bird", "flutter"]),
);

CustomRenderMatcher birdMatcher() => (context) => context.tree.element?.localName == 'bird';

CustomRenderMatcher flutterMatcher() => (context) => context.tree.element?.localName == 'flutter';

自定义iframe渲染

Widget html = Html(
  data: """
    <h3>Google iframe:</h3>
    <iframe src="https://google.com"></iframe>
    <h3>YouTube iframe:</h3>
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  """,
  customRenders: {
    iframeYT(): CustomRender.widget(widget: (context, buildChildren) {
      double? width = double.tryParse(context.tree.attributes['width'] ?? "");
      double? height = double.tryParse(context.tree.attributes['height'] ?? "");
      return Container(
        width: width ?? (height ?? 150) * 2,
        height: height ?? (width ?? 300) / 2,
        child: WebView(
          initialUrl: context.tree.attributes['src']!,
          javascriptMode: JavascriptMode.unrestricted,
          navigationDelegate: (NavigationRequest request) async {
            // 当显示嵌入式YouTube视频时，不需要加载其他URL，因此阻止URL加载
            if (!request.url.contains("youtube.com/embed")) {
              return NavigationDecision.prevent;
            } else {
              return NavigationDecision.navigate;
            }
          },
        ),
      );
    }),
    iframeOther(): CustomRender.widget(widget: (context, buildChildren) {
      double? width = double.tryParse(context.tree.attributes['width'] ?? "");
      double? height = double.tryParse(context.tree.attributes['height'] ?? "");
      return Container(
        width: width ?? (height ?? 150) * 2,
        height: height ?? (width ?? 300) / 2,
        child: WebView(
          initialUrl: context.tree.attributes['src'],
          javascriptMode: JavascriptMode.unrestricted,
          // 其他iframe内容可能需要滚动，因此使用VerticalDragGestureRecognizer
          gestureRecognizers: [
            Factory(() => VerticalDragGestureRecognizer())
          ].toSet(),
        ),
      );
    }),
    iframeNull(): CustomRender.widget(widget: (context, buildChildren) => Container(height: 0, width: 0)),
  }
);

CustomRenderMatcher iframeYT() => (context) => context.tree.element?.attributes['src']?.contains("youtube.com/embed") ?? false;

CustomRenderMatcher iframeOther() => (context) => !(context.tree.element?.attributes['src']?.contains("youtube.com/embed")
  ?? context.tree.element?.attributes['src'] == null);

CustomRenderMatcher iframeNull() => (context) => context.tree.element?.attributes['src'] == null;