Flutter电子书漫画阅读插件epub_comic_reader的使用

Flutter电子书漫画阅读插件epub_comic_reader的使用

Dart Epub Comic Reader

一个用于读取epub文件的包，主要基于Black Valley Comics使用的epub书籍。此包是从pub.dev上的epubx包分叉而来。

作者

部署

要使用该包，我们首先必须调用包的一个实例。

renderEbookReader(bool: orientation)
  • 垂直方向 - True
  • 水平方向 - False

请注意，如果声明了下拉按钮的功能，则项目列表不能为空。

基本用法

import 'package:epub_comic_reader/epub_comic_reader.dart';

EpubViewManager? manager;

[@override](/user/override)
void initState () {
    manager = EpubViewManager(
        ebookUri: 'https//link-to-epubfile.epub',
        title: 'Testing 001',
        appBarTheme: AppBarTheme(),
        isLightMode: true,
        changeAppBarTheme: () {
          print('Change app bar theme');
        },
        dropDownItemList: <String>['One', 'Two', 'Three'],
        dropDownButtonIcon: Icon(Icons.settings),
        initialValue: 'One',
        onDropDownItemSelected: (String? string) {
          print('Item selected ${string.toString()}');
        }
    );
}

[@override](/user/override)
Widget build(BuildContext context) {
    return FutureBuilder<Widget>(
        future: manager?.renderEbookReader(true),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text(snapshot.error.toString()),);
          } // end if

          if (snapshot.hasData) {
            return snapshot.data!;
          } else {
            return Center(child: CircularProgressIndicator(),);
          }// end if-else
        }
    );
}

基本用法与默认教程

import 'package:epub_comic_reader/epub_comic_reader.dart';

EpubViewManager? manager;

[@override](/user/override)
void initState () {
    manager = EpubViewManager(
        ebookUri: 'https//link-to-epubfile.epub',
        title: 'Testing 001',
        appBarTheme: AppBarTheme(),
        isLightMode: true,
        changeAppBarTheme: () {
          print('Change app bar theme');
        },
        dropDownItemList: <String>['One', 'Two', 'Three'],
        dropDownButtonIcon: Icon(Icons.settings),
        initialValue: 'One',
        onDropDownItemSelected: (String? string) {
          print('Item selected ${string.toString()}');
        }
    );

    // 使用此方法来定制显示的文本
    manager?.setTutorialProperties(
        'titleLeadingAction',
        'descriptionLeadingAction',
        'titleOrientationAction',
        'descriptionOrientationAction',
        'titleScreenAction',
        'descriptionScreen'
    );

    Future.delayed(Duration(seconds: 3), () => manager?.runBasicTutorial(context));
}

[@override](/user/override)
Widget build(BuildContext context) {
    return FutureBuilder<Widget>(
        future: manager?.renderEbookReader(true),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text(snapshot.error.toString()),);
          } // end if

          if (snapshot.hasData) {
            return snapshot.data!;
          } else {
            return Center(child: CircularProgressIndicator(),);
          }// end if-else
        }
    );
}

功能

  • 可自定义的应用程序栏
  • 可自定义的教程
  • 横屏和竖屏方向切换

自定义应用程序栏

应用程序栏在创建EpubViewManager实例时进行配置。因此，任何自定义都必须在创建EpubViewManager实例时完成。

import 'package:epub_comic_reader/epub_comic_reader.dart';

EpubViewManager? manager;

[@override](/user/override)
void initState () {
    manager = EpubViewManager(
        ebookUri: 'https//link-to-epubfile.epub',
        title: 'Testing 001',
        appBarTheme: AppBarTheme(),
        isLightMode: true,
        changeAppBarTheme: () {
          print('Change app bar theme');
        },
        dropDownItemList: <String>['One', 'Two', 'Three'],
        dropDownButtonIcon: Icon(Icons.settings),
        initialValue: 'One',
        onDropDownItemSelected: (String? string) {
          print('Item selected ${string.toString()}');
        }
    );
}

[@override](/user/override)
Widget build(BuildContext context) {
    return FutureBuilder<Widget>(
        future: manager?.renderEbookReader(true),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text(snapshot.error.toString()),);
          } // end if

          if (snapshot.hasData) {
            return snapshot.data!;
          } else {
            return Center(child: CircularProgressIndicator(),);
          }// end if-else
        }
    );
}

自定义教程

有多种方式可以自定义教程。你可以指定教程中显示的描述和标题，或者修改覆盖层的颜色以及标题和描述。

注意，你还可以选择两种基本教程类型之一：runBasicTutorial(context) 或 runBasicType2Tutorial(context)。前者适用于只渲染应用栏中前导部件的情况，而后者适用于渲染应用栏中所有部件的情况，包括主题按钮和下拉按钮。

import 'package:epub_comic_reader/epub_comic_reader.dart';

EpubViewManager? manager;

[@override](/user/override)
void initState () {
    manager = EpubViewManager(
        ebookUri: 'https//link-to-epubfile.epub',
        title: 'Testing 001',
        appBarTheme: AppBarTheme(),
        isLightMode: true,
        changeAppBarTheme: () {
          print('Change app bar theme');
        },
        dropDownItemList: <String>['One', 'Two', 'Three'],
        dropDownButtonIcon: Icon(Icons.settings),
        initialValue: 'One',
        onDropDownItemSelected: (String? string) {
          print('Item selected ${string.toString()}');
        }
    );
    // 设置教程所需的标题和描述
    manager?.setTutorialProperties(
        'titleLeadingAction',
        'descriptionLeadingAction',
        'titleOrientationAction',
        'descriptionOrientationAction',
        'titleScreenAction',
        'descriptionScreen'
    );
    // 在所有相关部件渲染后运行教程
    Future.delayed(Duration(seconds: 3), () => manager?.runBasicTutorial(context));
}

[@override](/user/override)
Widget build(BuildContext context) {
    return FutureBuilder<Widget>(
        future: manager?.renderEbookReader(true),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text(snapshot.error.toString()),);
          } // end if

          if (snapshot.hasData) {
            return snapshot.data!;
          } else {
            return Center(child: CircularProgressIndicator(),);
          }// end if-else
        }
    );
}

示例

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

class ExampleReader extends StatefulWidget {
  const ExampleReader({super.key});

  [@override](/user/override)
  State<ExampleReader> createState() => _ExampleReaderState();
}

class _ExampleReaderState extends State<ExampleReader> {
  EpubViewManager? manager;

  [@override](/user/override)
  void initState () {
    super.initState();

    // 设置视图管理器
    manager = EpubViewManager(
        ebookUri: 'https//some-link-to-some-epub-file.epub',
        title: 'Testing 001',
        appBarTheme: AppBarTheme(),
        isLightMode: true,
        changeAppBarTheme: () {
          print('Change app bar theme');
        },
        dropDownItemList: <String>['One', 'Two', 'Three'],
        dropDownButtonIcon: Icon(Icons.settings),
        initialValue: 'One',
        onDropDownItemSelected: (String? string) {
          print('Item selected ${string.toString()}');
        }
    );
    // 运行教程在构建渲染完成后
    // 使用个性化消息运行教程
    manager?.setTutorialProperties(
        'titleLeadingAction',
        'descriptionLeadingAction',
        'titleOrientationAction',
        'descriptionOrientationAction',
        'titleScreenAction',
        'descriptionScreen'
    );
    // 运行自定义教程
    Future.delayed(Duration(seconds: 3), () => manager?.runCustomTutorial(
        context,
        Colors.redAccent,
        {
          'title': 'title',
          'titleTextStyle': TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
              fontSize: 20.0
          ),
          'description': 'description',
          'descriptionTextStyle': TextStyle(
              color: Colors.white,
          )
        },
        {
          'title': 'title',
          'titleTextStyle': TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
              fontSize: 20.0
          ),
          'description': 'description',
          'descriptionTextStyle': TextStyle(
            color: Colors.white,
          )
        },
        {
          'title': 'title',
          'titleTextStyle': TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
              fontSize: 20.0
          ),
          'description': 'description',
          'descriptionTextStyle': TextStyle(
            color: Colors.white,
          )
        }
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder<Widget>(
        future: manager?.renderEbookReader(true),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text(snapshot.error.toString()),);
          } // end if

          if (snapshot.hasData) {
            return snapshot.data!;
          } else {
            return Center(child: CircularProgressIndicator(),);
          }// end if-else
        }
    );
  }
}

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

1 回复

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


epub_comic_reader 是一个用于 Flutter 的插件，专门用于阅读 EPUB 格式的电子书和漫画。它提供了丰富的功能，如翻页、缩放、书签、目录导航等，帮助用户在移动设备上获得良好的阅读体验。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 epub_comic_reader 的依赖：

dependencies:
  flutter:
    sdk: flutter
  epub_comic_reader: ^latest_version

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

2. 基本使用

在 Flutter 项目中使用 epub_comic_reader 的基本步骤如下：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('EPUB/Comic Reader'),
        ),
        body: EpubComicReader(
          // EPUB 文件路径或网络 URL
          epubPath: 'assets/example.epub',
          // 可选：自定义阅读器主题
          theme: EpubComicReaderThemeData(
            backgroundColor: Colors.white,
            textColor: Colors.black,
            // 其他自定义样式
          ),
          // 可选：阅读器回调
          onPageChanged: (int page) {
            print('Current Page: $page');
          },
          onBookmarkAdded: (int page) {
            print('Bookmark added at page: $page');
          },
        ),
      ),
    );
  }
}

3. 加载 EPUB 文件

epub_comic_reader 支持从本地文件系统或网络加载 EPUB 文件。你可以通过 epubPath 参数指定文件路径或 URL。

  • 本地文件：将 EPUB 文件放在 assets 文件夹中，并在 pubspec.yaml 中声明：
flutter:
  assets:
    - assets/example.epub

然后在代码中引用：

epubPath: 'assets/example.epub',
  • 网络文件：直接提供 EPUB 文件的 URL：
epubPath: 'https://example.com/path/to/example.epub',

4. 自定义阅读器主题

你可以通过 EpubComicReaderThemeData 自定义阅读器的外观，包括背景颜色、文字颜色、字体大小等。

theme: EpubComicReaderThemeData(
  backgroundColor: Colors.white,
  textColor: Colors.black,
  fontSize: 16.0,
  // 其他自定义样式
),

5. 处理回调

epub_comic_reader 提供了多个回调函数，用于处理阅读器的各种事件，例如翻页、添加书签等。

  • onPageChanged: 当用户翻页时触发。
  • onBookmarkAdded: 当用户添加书签时触发。
onPageChanged: (int page) {
  print('Current Page: $page');
},
onBookmarkAdded: (int page) {
  print('Bookmark added at page: $page');
},

6. 高级功能

epub_comic_reader 还支持一些高级功能，如：

  • 目录导航：用户可以跳转到 EPUB 文件的特定章节。
  • 书签管理：用户可以添加、删除和管理书签。
  • 缩放和滚动：用户可以缩放和滚动页面，以获得更好的阅读体验。

7. 处理错误

在加载 EPUB 文件时，可能会遇到错误。你可以通过 onError 回调来处理这些错误。

onError: (dynamic error) {
  print('Error loading EPUB: $error');
},
回到顶部