Flutter【绘制&手势】模拟纸质书翻页2--插件化

前言

之前一篇文章模拟纸质书籍翻页解析了在移动端纸质书籍翻页的效果的原理，那么在这次有时间抽空在之前的基础上这次封装了这个组件，使用起来更方便，并优化了一些之前的问题，完善了一些细节。

• 本次的插件优化了之前遗留的一些历史小问题：

1、完善了翻页角部的阴影处理。 2、优化了翻页动画。 3、自定义翻页内容。 4、优化了手势操作等。

目前功能

1、支持直接读取txt文件文本阅读，调整字号，模拟翻页。

2、支持自定义当前页、下一页、指定页面的Widget布局内容。

3、支持手势横向滑动翻页，优化了手势控制区域，支持返回上一页。

4、支持翻页动画自定义设置。

5、支持跳到指定页。

支持两种翻页场景：

一种是电子书场景： 需要我们计算分页字数的，这个比较麻烦，由于字号大小会影响每页容纳的文字数量，这里单独抽了出来封装了一个组件EBook可以直接使用。

电子书分页计算思路： 这里简单说下我的思路，已知书籍高度，计算得到文字高度，就可以得到每页可容纳最大行文字，之后计算所有页码文字首个文字index， 例如：每页文字最多1000字， 第一页默认为0，从第二页开始，计算开始角标，首先0-1000计算出，例如首页文字最大为456个字，第二页开始即为456，第三页从456到1456开始计算... 以此类推，从而计算出所有页码。这里就不细说了，有兴趣的小伙伴可以下载源码了解。

注：这里计算文本高度时对于同一字号不同字符所占空间最大高度是不同的，如果当这个特殊字符完整的占用了一行文本，那么这一行文本的高度计算就会出现误差。例如...字符的高度是低于汉字的，这里就涉及到了Flutter是如何计算文本占用空间的。

二是自定义场景：，比如插画、漫画等场景，不需要计算每页字数的，并且每页是独立的布局展示， 这个比较简单，直接使用BookFx即可，设置最大页码即可。

直接上效果图：

示例效果

电子书：

插画：

git地址：bookfx。

示例代码：

电子书：

EBook(
    maxWith: 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),

完整的源码已上传github，有需要的小伙伴自取。

最后

总的来说，电子书分页计算是比较复杂的，目前还没实现更改字号及时更新页面，有时间再优化，当然这个插件的核心目的是在翻页的效果，并不局限于电子书，所以电子书这块内容比较简陋，有需要的小伙伴可以下载源码自信修改，也不是很复杂。

如果这个插件对你有帮助，欢迎点赞收藏star。