Flutter书籍管理或阅读插件bookfx的使用

Flutter书籍管理或阅读插件bookfx的使用

模拟纸质书籍翻页效果

本项目主要模拟了我们在看书籍时的翻页动作，并支持了电子书直接预览。如果你阅读文本电子书，可以直接使用EBook组件；如果你用来阅读其他例如插画等不需要计算字数的内容，请使用BookFx组件。

目前支持的功能

1. 支持直接读取txt文件文本阅读，调整字号，模拟翻页。
2. 支持自定义当前页、下一页、指定页面的Widget布局内容。
3. 支持手势横向滑动翻页，优化了手势控制区域，支持返回上一页。
4. 支持翻页动画自定义设置。
5. 支持跳到指定页。

使用

首先需要导入bookfx包：

import 'package:bookfx/bookfx.dart';

• 如果你想用在书籍需要计算文字的场景，可以使用EBook。
• 如果你想用在其他场景，例如插画，可以使用BookFx，并自定义布局。

效果

电子书：

插画：

示例代码

电子书

EBook(
    maxWidth: MediaQuery.of(context).size.width, // 设置最大宽度为屏幕宽度
    eBookController: eBookController, // 控制器
    bookController: bookController, // 书籍控制器
    data: data, // 书籍数据
    fontSize: eBookController.fontSize, // 字体大小
    padding: const EdgeInsetsDirectional.all(15), // 内边距
    maxHeight: 600, // 最大高度
),

插画

BookFx(
    size: Size(MediaQuery.of(context).size.width, 600), // 设置宽高
    pageCount: images.length, // 页面总数
    currentPage: (index) {
      return Image.asset(
        images[index], // 当前页的图片
        fit: BoxFit.fill, // 图片填充方式
        width: MediaQuery.of(context).size.width, // 宽度
      );
    },
    lastCallBack: (index) {
      if (index == 0) {
        return;
      }
      setState(() {}); // 上一页回调
    },
    nextPage: (index) {
      return Image.asset(
        images[index], // 下一页的图片
        fit: BoxFit.fill, // 图片填充方式
        width: MediaQuery.of(context).size.width, // 宽度
      );
    },
    controller: bookController, // 控制器
),

完整示例Demo

以下是一个完整的示例代码，展示了如何使用bookfx插件来创建一个包含电子书和自定义插画的Flutter应用。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late EBookController eBookController;
  late BookFxController bookController;
  List<String> images = [
    'assets/image1.png',
    'assets/image2.png',
    'assets/image3.png',
  ];
  String data = "这是电子书的内容，可以是任何文本。";

  [@override](/user/override)
  void initState() {
    super.initState();
    eBookController = EBookController();
    bookController = BookFxController();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text("翻页demo"),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return Scaffold(
                        appBar: AppBar(title: const Text("电子书")),
                        body: EBook(
                          maxWidth: MediaQuery.of(context).size.width,
                          eBookController: eBookController,
                          bookController: bookController,
                          data: data,
                          fontSize: eBookController.fontSize,
                          padding: const EdgeInsetsDirectional.all(15),
                          maxHeight: 600,
                        ),
                      );
                    },
                  ),
                );
              },
              child: const Text("电子书demo"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return Scaffold(
                        appBar: AppBar(title: const Text("插画")),
                        body: BookFx(
                          size: Size(MediaQuery.of(context).size.width, 600),
                          pageCount: images.length,
                          currentPage: (index) {
                            return Image.asset(
                              images[index],
                              fit: BoxFit.fill,
                              width: MediaQuery.of(context).size.width,
                            );
                          },
                          lastCallBack: (index) {
                            if (index == 0) {
                              return;
                            }
                            setState(() {});
                          },
                          nextPage: (index) {
                            return Image.asset(
                              images[index],
                              fit: BoxFit.fill,
                              width: MediaQuery.of(context).size.width,
                            );
                          },
                          controller: bookController,
                        ),
                      );
                    },
                  ),
                );
              },
              child: const Text("自定义demo"),
            ),
          ],
        ),
      ),
    );
  }
}