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

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

Flutter 插件 flutter_html_view 可以将 HTML 渲染为 Flutter 的小部件。

参考链接

Refer this for full support of inline webview for android and iOS

Flutter 本身没有默认支持渲染 HTML，因此此包可以帮助您将 HTML 转换为原生的小部件。

支持的功能

  • 支持视频标签
  • 链接现在可以点击

支持的标签

  • p
  • em
  • b
  • img
  • video
  • h1, h2, h3, h4, h5, h6

注意事项

  • 此插件会将一些 HTML 标签转换为 Flutter 小部件。
  • 此插件不支持渲染完整的 HTML 代码（Flutter 中没有内置的 Web 渲染支持）。

如何使用

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_html_view: ^0.5.11

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

import 'package:flutter_html_view/flutter_html_view.dart';

String html = '<body>Hello world! <a href="www.html5rocks.com">HTML5 rocks!</a>';

new HtmlView(
  data: html,
  baseURL: "", // 可选参数，类型 String
  onLaunchFail: (url) { // 可选参数，类型 Function
    print("launch $url failed");
  },
  scrollable: false, // false 使用 MarkdownBody，true 使用 HtmlView
)

MarkdownStyleSheet

可以自定义样式表：

styleSheet: MarkdownStyleSheet(
  // 自定义样式选项
),

styleOptions

默认和可用的样式选项：

名称 默认值 可选项
headingStyle “setext” “setext”, “atx”
hr “* * *” “* * *”, “- - -”, “_ _ _”
bulletListMarker “*” “*”, “-”, “_”
codeBlockStyle “indented” “indented”, “fenced”
fence “" | "”, “~~~”
emDelimiter “_” “_”, “*”
strongDelimiter “**” “**”, “__”
linkStyle “inlined” “inlined”, “referenced”
linkReferenceStyle “full” “full”, “collapsed”, “shortcut”

iOS

警告：视频播放器在 iOS 模拟器上不可用。开发/测试时必须使用 iOS 设备。

在 <project root>/ios/Runner/Info.plist 文件中添加以下条目：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

此条目允许您的应用通过 URL 访问视频文件。

Android

确保在 Android 清单文件中包含以下权限：

<uses-permission android:name="android.permission.INTERNET"/>

示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    String html = '''
        <h1>This is &nbsp;heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
        <h4>This is heading 4</h4>
        <h5>This is heading 5</h5>
        <h6>This is heading 6</h6>
        <a href="https://google.com">Google</a>
        <br/>
        <img alt="Test Image" src="https://source.unsplash.com/random/300x200">
        <br/>
        <video src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_5mb.mp4"></video>
        <br/>
        <a data-id="1" href="https://google.com">Go Google</a>
        <br/>
        <a href="mailto:ponnamkarthik3@gmail.com">Mail to me</a>
        <br/>
        <video id="video1">
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <br/>
        <img src="https://source.unsplash.com/random/300x500">
    ''';

    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Plugin example app'),
        ),
        body: new Container(
          child: new HtmlView(
            data: html,
            stylingOptions: null,
            styleSheet: MarkdownStyleSheet(),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter HTML内容渲染插件flutter_html_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter HTML内容渲染插件flutter_html_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中渲染 HTML 内容可以使用 flutter_html_view 插件，但这个插件已经过时，不再维护。取而代之的是 flutter_html 插件，它功能更强大且维护良好。以下是如何使用 flutter_html 插件来渲染 HTML 内容的步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_html 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^2.2.1

然后运行 flutter pub get 来获取依赖。

2. 使用 flutter_html 渲染 HTML

在你的 Dart 文件中，导入 flutter_html 并使用 Html 组件来渲染 HTML 内容：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter HTML Example'),
        ),
        body: HtmlExample(),
      ),
    );
  }
}

class HtmlExample extends StatelessWidget {
  final String htmlContent = """
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <p>This is a <strong>paragraph</strong> with <em>some</em> <a href='https://flutter.dev'>links</a>.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <img src='https://via.placeholder.com/150' alt='Placeholder image'/>
  """;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Html(
        data: htmlContent,
        // 可选：自定义样式
        style: {
          "h1": Style(
            fontSize: FontSize(24.0),
            fontWeight: FontWeight.bold,
          ),
          "p": Style(
            fontSize: FontSize(16.0),
            color: Colors.black87,
          ),
          "a": Style(
            color: Colors.blue,
            textDecoration: TextDecoration.none,
          ),
        },
        // 可选：处理链接点击事件
        onLinkTap: (url, _, __, ___) {
          print("You tapped $url");
        },
        // 可选：处理图片加载错误
        onImageError: (exception, stackTrace) {
          print("Image load error: $exception");
        },
      ),
    );
  }
}
回到顶部