Flutter中如何处理epub_parser解析的HTML内容以实现可读展示？

我通过pub.dev上的epub_parser包成功读取了epub文件内容，但返回的是HTML格式。当前使用Text组件展示时会直接显示HTML标签，无法正常阅读。我的实现代码如下：

import 'dart:io';

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

class BookTest extends StatefulWidget {
  const BookTest({super.key, required this.book});
  final File? book;

  @override
  State<BookTest> createState() => _BookTestState();
}

class _BookTestState extends State<BookTest> {
  late EpubBook _book;
  late Future<void> _loadBook;

  @override
  void initState() {
    super.initState();
    _loadBook = _loadEpubBook();
  }

  Future<void> _loadEpubBook() async {
    File file = File(widget.book!.path);
    List<int> bytes = await file.readAsBytes();
    _book = await EpubReader.readBook(bytes);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FutureBuilder(
        future: _loadBook,
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return SingleChildScrollView(
              child: Column(
                children: [
                  for (EpubChapter chapter in _book.Chapters!) ...[
                    Text(
                      chapter.Title!,
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                    Text(chapter.HtmlContent!),
                  ],
                ],
              ),
            );
          } else {
            return CircularProgressIndicator();
          }
        },
      ),
    );
  }
}

处理HTML内容并实现可读展示，主要有两种实用方案，可根据需求选择：

1. 用html包转HTML为富文本 #

适合需要纯文本风格展示、自定义样式的场景，能将HTML解析为Flutter原生的TextSpan，通过RichText组件渲染。

步骤： #

• 先在pubspec.yaml添加依赖：

dependencies:
  html: ^0.15.4 # 请使用最新版本

• 修改代码中的展示逻辑：

// 新增导入
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' as dom;

// 替换原代码中Text(chapter.HtmlContent!)的部分
RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: _parseHtml(chapter.HtmlContent!),
  ),
)

// 新增HTML解析函数
List<TextSpan> _parseHtml(String html) {
  final document = parse(html);
  final nodes = document.body?.nodes;
  final spans = <TextSpan>[];
  
  if (nodes != null) {
    for (var node in nodes) {
      if (node is dom.Text) {
        spans.add(TextSpan(text: node.text));
      } else if (node is dom.Element) {
        TextStyle? style;
        // 根据HTML标签设置对应样式
        switch (node.localName) {
          case 'h1':
          case 'h2':
            style = TextStyle(fontSize: 18, fontWeight: FontWeight.bold);
            break;
          case 'b':
          case 'strong':
            style = TextStyle(fontWeight: FontWeight.bold);
            break;
          case 'i':
          case 'em':
            style = TextStyle(fontStyle: FontStyle.italic);
            break;
          case 'p':
            spans.add(TextSpan(text: '\n\n')); // 段落间添加换行
            break;
        }
        // 递归处理子节点
        spans.add(TextSpan(
          style: style,
          children: _parseHtml(node.innerHtml),
        ));
      }
    }
  }
  return spans;
}

2. 用webview_flutter加载HTML #

适合HTML包含复杂元素（图片、表格、自定义CSS）的场景，渲染效果和网页一致，兼容性更好。

步骤： #

• 添加依赖到pubspec.yaml：

dependencies:
  webview_flutter: ^4.4.0 # 请使用最新版本

• 修改展示代码：

// 新增导入
import 'package:webview_flutter/webview_flutter.dart';

// 替换原代码中Text(chapter.HtmlContent!)的部分
WebViewWidget(
  controller: WebViewController()
    ..loadHtmlString(chapter.HtmlContent!),
)

3. 结合翻页组件优化阅读体验 #

如果需要翻页功能，可以用PageView或专门的翻页插件（如flip_view）配合上述方案：

PageView(
  children: _book.Chapters!.map((chapter) {
    return SingleChildScrollView(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            chapter.Title!,
            style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 16),
          RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style.copyWith(height: 1.6),
              children: _parseHtml(chapter.HtmlContent!),
            ),
          ),
        ],
      ),
    );
  }).toList(),
)

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