Flutter电子书阅读插件epub_view_enhanced的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter电子书阅读插件epub_view_enhanced的使用

epub_view

纯 Flutter 组件（非原生）用于在所有平台上查看 EPUB 文档。基于 epub 包。使用 Flutter 组件（而非原生视图）在以下平台呈现：Web、MacOS、Windows、Linux、Android 和 iOS。

展示

开始使用

在你的 Flutter 项目中添加依赖：

flutter pub add epub_view

使用示例

import 'dart:typed_data';

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

late EpubController _epubController;

@override
void initState() {
  super.initState();
  _epubController = EpubController(
    // 加载文档
    document: EpubDocument.openAsset('assets/book.epub'),
    // 设置起始点
    epubCfi: 'epubcfi(/6/6[chapter-2]!/4/2/1612)',
  );
}

@override
Widget build(BuildContext context) => Scaffold(
  appBar: AppBar(
    // 显示实际章节名称
    title: EpubViewActualChapter(
      controller: _epubController,
      builder: (chapterValue) => Text(
        'Chapter: ' + (chapterValue?.chapter?.Title?.replaceAll('\n', '').trim() ?? ''),
        textAlign: TextAlign.start,
      )
    ),
  ),
  // 显示目录
  drawer: Drawer(
    child: EpubViewTableOfContents(
      controller: _epubController,
    ),
  ),
  // 显示 EPUB 文档
  body: EpubView(
    controller: _epubController,
  ),
);

如何从上次阅读位置开始？

此方法允许你即使在章节内部也能保持精确的阅读位置：

_epubController = EpubController(
  // 初始化时使用 EPUB CFI 字符串以从上次位置打开书籍
  epubCfi: 'epubcfi(/6/6[chapter-2]!/4/2/1612)',
);

// 连接控制器
EpubView(
  controller: _epubController,
);

// 获取 EPUB CFI 字符串
// 输出示例 - epubcfi(/6/6[chapter-2]!/4/2/1612)
final cfi = _epubController.generateEpubCfi();

// 或者使用控制器进行导航
_epubController.gotoEpubCfi('epubcfi(/6/6[chapter-2]!/4/2/1612)');

API

打开文档

本地文档打开：

EpubDocument.openAsset('assets/sample.epub')

EpubDocument.openData(FutureOr<Uint8List> data)

// 不支持 Web
EpubDocument.openFile('path/to/file/on/device')

网络文档打开：

安装 internet_file 包（支持所有平台）：

flutter pub add internet_file

然后使用它：

import 'package:internet_file/internet_file.dart';

// 需要服务器上的 CORS 策略。你可以提高你的 CORS 代理。
EpubDocument.openData(InternetFile.get('https://link.to/book.epub'))

控制文档

// 获取当前视图的实际 EPUB CFI 字符串
// 输出示例 - epubcfi(/6/6[chapter-2]!/4/2/1612)
final cfi = _epubController.generateEpubCfi();

// 导航到文档中的段落
_epubController.gotoEpubCfi('epubcfi(/6/6[chapter-2]!/4/2/1612)');

文档回调

EpubView(
  controller: epubController,
  
  onExternalLinkPressed: (href) {},

  onDocumentLoaded: (document) {},
  onChapterChanged: (chapter) {},
  onDocumentError: (error) {},
);

更多关于Flutter电子书阅读插件epub_view_enhanced的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter电子书阅读插件epub_view_enhanced的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 epub_view_enhanced 插件在 Flutter 应用中创建电子书阅读器的示例代码。epub_view_enhanced 是一个增强版的 EPUB 阅读插件，它提供了比官方 epub_view 插件更多的功能和更好的性能。

首先，确保你已经在 pubspec.yaml 文件中添加了 epub_view_enhanced 依赖：

dependencies:
  flutter:
    sdk: flutter
  epub_view_enhanced: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

接下来，你可以创建一个简单的 Flutter 应用来展示电子书。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:epub_view_enhanced/epub_view.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter EPUB Reader',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late EpubController _controller;

  @override
  void initState() {
    super.initState();
    _loadEpub();
  }

  Future<void> _loadEpub() async {
    // 获取应用文档目录
    final Directory appDocDir = await getApplicationDocumentsDirectory();
    final String filePath = '${appDocDir.path}/sample.epub';

    // 这里假设你已经有了一个名为 sample.epub 的文件在应用的文档目录中
    // 如果不是，你需要先下载或复制该文件到该目录

    _controller = EpubController(
      filePath: filePath,
      autoLoad: true,
    );

    // 监听加载完成事件
    _controller.listener = () {
      if (_controller.loadState == EpubLoadState.completed) {
        print('EPUB loaded successfully!');
      }
    };

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter EPUB Reader'),
      ),
      body: _controller.loadState == EpubLoadState.notLoaded
          ? Center(child: CircularProgressIndicator())
          : EpubViewer(
              controller: _controller,
            ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

说明：

  1. 依赖安装：首先，在 pubspec.yaml 中添加 epub_view_enhanced 依赖。

  2. 应用结构：MyApp 是根 widget，MyHomePage 是主页，它包含一个 EpubViewer widget 用于显示电子书内容。

  3. 加载电子书：在 _MyHomePageState 的 initState 方法中，使用 getApplicationDocumentsDirectory 获取应用的文档目录，并指定 EPUB 文件的路径。这里假设 EPUB 文件名为 sample.epub，你需要根据实际情况调整路径或下载文件到该目录。

  4. 控制器设置：创建 EpubController 实例来控制 EPUB 文件的加载和显示。通过监听 listener 属性，可以在电子书加载完成时执行一些操作，比如打印日志。

  5. 显示电子书：在 build 方法中，根据 EpubController 的加载状态，显示加载指示器或 EpubViewer。

  6. 资源释放：在 dispose 方法中释放 EpubController 资源。

请确保你的 Flutter 环境和依赖项是最新的，并根据实际情况调整文件路径和逻辑。这个示例提供了一个基本的电子书阅读器框架，你可以根据需求进一步扩展功能，比如添加导航栏、书签、高亮等功能。

回到顶部