Flutter HTML内容渲染插件flutter_widget_from_html的使用

简介

flutter_widget_from_html 是一个用于将HTML内容渲染为Flutter小部件的包。它支持超链接、图片、音频、视频、iframe以及70多个其他标签。你可以通过 Live demo 查看在线演示。

开始使用

添加依赖

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

dependencies:
  flutter_widget_from_html: ^0.15.3

平台特定配置

iOS

该包使用 just_audio 播放音频，而这个依赖项使用麦克风API。默认情况下，App Store要求提供使用描述，可以通过编辑你的 ios/Podfile 来跳过此要求。详细说明请参阅 just_audio pub.dev页面。 如果你不需要 <AUDIO> 标签支持（例如你的HTML中从未包含该标签），则可以切换到核心包，并使用部分mixins来控制应用大小。详见 Extensibility。

使用方法

导入包并在适当位置使用 HtmlWidget 小部件：

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Widget from HTML',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Widget from HTML'),
        ),
        body: Center(
          child: HtmlWidget(
            '''
            <h3>Heading</h3>
            <p>
              A paragraph with <strong>strong</strong>, <em>emphasized</em>
              and <span style="color: red">colored</span> text.
            </p>
            ''',
            // 自定义样式构建器
            customStylesBuilder: (element) {
              if (element.classes.contains('foo')) {
                return {'color': 'red'};
              }
              return null;
            },
            // 自定义小部件构建器
            customWidgetBuilder: (element) {
              if (element.attributes['foo'] == 'bar') {
                // 渲染一个自定义块小部件，占据全宽
                return FooBarWidget();
              }
              if (element.attributes['fizz'] == 'buzz') {
                // 在周围文本中内联渲染自定义小部件
                return InlineCustomWidget(child: FizzBuzzWidget());
              }
              return null;
            },
            // 点击链接时触发的回调
            onTapUrl: (url) => print('tapped $url'),
            // 设置HTML主体的渲染模式，默认为简单的Column布局
            renderMode: RenderMode.column,
            // 设置文本的默认样式
            textStyle: TextStyle(fontSize: 14),
          ),
        ),
      ),
    );
  }
}

功能特性

支持的HTML标签

以下是具有特殊含义或样式的标签，所有其他标签将被解析为文本。你可以在此处比较Flutter渲染与浏览器的差异。

• A: 下划线，主题强调色
  • 滚动到锚点
  • 通过 url_launcher 启动URL，带有基础URL解析器
• AUDIO 通过 just_audio
• H1/H2/H3/H4/H5/H6
• IFRAME 通过 webview_flutter
• IMG 支持asset (asset://)、data uri、本地文件 (file://) 和网络图片，通过 cached_network_image，并额外支持 .svg 文件通过 flutter_svg
• LI/OL/UL 支持：
  • 属性：type, start, reversed
  • 内联样式 list-style-type 值：lower-alpha, upper-alpha, lower-latin, upper-latin, circle, decimal, disc, lower-roman, upper-roman, square
• TABLE/CAPTION/THEAD/TBODY/TFOOT/TR/TD/TH 支持：
  • TABLE属性 border, cellpadding, cellspacing
  • TD/TH属性 colspan, rowspan, valign
  • 如果列太宽，表格可滚动
• SVG 通过 flutter_svg
• VIDEO 通过 chewie
• 其他如ABBR, ACRONYM, ADDRESS等

忽略的标签

• SCRIPT
• STYLE

属性和内联样式

支持多种属性和内联样式，具体详情请参见官方文档。

扩展性

核心包实现了小部件构建逻辑，具有高测试覆盖率以确保正确性。它尝试通过使用 RichText 和特定的 TextStyle、合并文本跨度、在固定大小框中显示图片等方式构建最优树结构，为应用程序提供定制化的基础。

更多扩展信息请参阅 extensibility document。

希望这些信息对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。