在 Flutter 中显示以 html 表单显示的 epub 文件的检索内容

Question

我能够使用一个简单的包实际检索 ebup 文件“https://pub.dev/packages/epub_parser”的内容，但它返回一个 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 {
    // String fileName = 'assets/files/rich.epub';
    // String fullPath = p.join(Directory.current.path, fileName);
    File file = File(widget.book!.path);
    List<int> bytes = await file.readAsBytes();
    _book = await EpubReader.readBook(bytes);
    print('bytes');
    print(_book);
  }

  @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 格式显示内容，请问有谁知道我如何才能很好地显示它们并让普通读者清晰易读，这是它在模拟器上的样子

Answer 1

你应该使用 flutter_html 包

这是示例代码：

    Html(
        data: htmlData.outerHtml,
        onLinkTap: (href, _, __) => onExternalLinkPressed(href!),
        style: {
          'html': Style(
            padding: HtmlPaddings.only(
              top: (options.paragraphPadding as EdgeInsets?)?.top,
              right: (options.paragraphPadding as EdgeInsets?)?.right,
              bottom: (options.paragraphPadding as EdgeInsets?)?.bottom,
              left: (options.paragraphPadding as EdgeInsets?)?.left,
            ),
          ).merge(Style.fromTextStyle(options.textStyle)),
        },
        extensions: [
          TagExtension(
            tagsToExtend: {"img"},
            builder: (imageContext) {
              final url =
                  imageContext.attributes['src']!.replaceAll('../', '');
              final content = Uint8List.fromList(
                  document.Content!.Images![url]!.Content!);
              return Image(
                image: MemoryImage(content),
              );
            },
          ),
        ],
      ),