在Flutter中使用HTML库解析HTML后如何渲染为网页在App展示

你当前使用的html 0.15.0库仅提供HTML解析能力，没有内置渲染功能，要在Flutter App界面展示HTML格式内容，可参考以下两种实现方案：

方案1：使用flutter_html组件渲染（原生Widget渲染，性能好） #

这是轻量HTML内容渲染的首选方案，将HTML标签自动转为Flutter原生Widget展示：

• 第一步：在pubspec.yaml中添加依赖

dependencies:
  flutter:
    sdk: flutter
  html: ^0.15.0
  # 选择与你的Flutter版本匹配的flutter_html版本
  flutter_html: ^3.0.0-beta.2

• 第二步：页面代码示例

import 'package:flutter/material.dart';
import 'package:html/parser.dart' as html_parser;
import 'package:flutter_html/flutter_html.dart';

class HtmlDisplayPage extends StatelessWidget {
  const HtmlDisplayPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 你的原有解析逻辑
    final document = html_parser.parse(
      '<body>Hello world! <a href="www.html5rocks.com">HTML5 rocks!'
    );
    final htmlStr = document.outerHtml;

    return Scaffold(
      appBar: AppBar(title: const Text('HTML内容展示')),
      body: SingleChildScrollView(
        child: Html(
          // 传入解析后的HTML字符串
          data: htmlStr,
          // 自定义标签样式
          style: {
            "body": Style(padding: const EdgeInsets.all(12)),
            "a": Style(color: Colors.blue, textDecoration: TextDecoration.underline),
          },
          // 处理链接点击事件
          onLinkTap: (url, attributes, element) {
            // 可自行实现跳转逻辑
            debugPrint('点击链接：$url');
          },
        ),
      ),
    );
  }
}

方案2：使用webview_flutter加载（完整浏览器能力） #

如果HTML内容复杂度高（包含复杂样式、JS逻辑等），可以用WebView直接加载HTML字符串：

• 第一步：添加依赖

dependencies:
  webview_flutter: ^4.4.0

• 第二步：页面代码示例

import 'package:flutter/material.dart';
import 'package:html/parser.dart' as html_parser;
import 'package:webview_flutter/webview_flutter.dart';

class HtmlWebviewPage extends StatelessWidget {
  HtmlWebviewPage({super.key});

  @override
  Widget build(BuildContext context) {
    final document = html_parser.parse(
      '<body>Hello world! <a href="www.html5rocks.com">HTML5 rocks!'
    );
    // 初始化WebViewController
    final controller = WebViewController()
      ..loadHtmlString(document.outerHtml);

    return Scaffold(
      appBar: AppBar(title: const Text('WebView加载HTML')),
      body: WebViewWidget(controller: controller),
    );
  }
}

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