flutter 小说翻页实现

近期项目收尾,回顾一下flutter的小说翻页效果以及逻辑的实现.

一、主要逻辑

1、翻页效果采用的是AnimationController动画的方式
2、由于小说的章节比较多, 需要无限翻页,采用的是多页面进行内容替换的逻辑
3、难点: A页面内容的加载时机;B章节内容的加载时机;C从目录切换章节;D字体行距的切换;E内容分页

二、页面结构

整个内容采用的是一个带有手势交互的FutureBuilder视图, 采用FutureBuilder的好处是可以自然的根据网络请求返回的不同结果加载对应的数据,并且不需要手动的去setstate

Widget _bodyView() {
    return GestureDetector(
      onTapUp: (TapUpDetails details) {
        double xRate = details.globalPosition.dx / Get.width;
        if (xRate > 0.33 && xRate < 0.66) {
          NovelReadModel read = dataChapterList[currentIndex];
          widget.clickMenu(read);
        } else if (xRate >= 0.66) {
          turnPagenext = true;
          nextPage();
          autoListenTurnPage = false;
        } else {
          // 如果是第一章  则不翻页
          if (currentIndex == 1) {
            gbs.shower.toast("已经是第一页了");
            return;
          }
          turnPagenext = false;
          previousPage();
          autoListenTurnPage = false;
        }
      },
      onPanDown: (details) {
        handsTapDetails = details;
      },
      onHorizontalDragUpdate: _onHorizontalDragUpdate,
      onHorizontalDragEnd: (_) => _onHorizontalDragEnd(),
      onHorizontalDragCancel: _resetAnimation,
      child: FutureBuilder(),// 伪代码
    );
  }

从代码中可以看出,
翻页不仅仅支持左右滑动页面onHorizontalDragUpdate方法处理
还可以支持点击视图的边缘onTapUp: (TapUpDetails details) {的方式去切换

WechatIMG3525.jpg

单页面内容包含了头部的章节菜单和底部的文章内容
其中内容采用的是富文本加载方便听书时的进度显示

三、翻页

书籍有很多内容, 我们采用一个数组L,首次存储三个章节的内容(上一章、本章节、下一章)
翻页的重点逻辑在_onHorizontalDragEnd的方法里面,这个方法是手势结束的方法,.需要通过手势的坐标变化来确定是上一页还是下一页
1、我们拿下一页来举例
下一页要做一下几个事情
(1)、是不是本书的最后一张最后一页, 如果是则需要将后面的一页替换为完本页面
(2)、如果数组L中没有下一章的数据(网络不佳就会没有下一章),需要进行网络请求填充下一章
(3)、更新当前页码和数组下标
(4)、讲停留在页面中间的动画执行完毕
(5)、刷新下一页内容
(6)、统计埋点
(7)、记录历史记录(存本地数据库)
(8)、根据需要向服务器上传历史记录
历史记录中涉及到一个章节阅读字数的计算问题, 可以根据需要取本页的第一个字和最后一个字中间的字

WechatIMG3527.jpg

pageCenter.autoNext();
      // 更新center页面(1、将第二页的内容替换为第三页 2、让第二页返回视觉上代替第三页)
await Future.delayed(const Duration(milliseconds: 100));
pageCenter.refresh(_pageCenterChild(dataChapterList[currentIndex].content, dataChapterList[currentIndex], true));
await Future.delayed(const Duration(milliseconds: 200));
pageCenter.noanimaPrevious();
pageBottom.refresh(_pageDefaultChild(dataChapterList[currentIndex + 1].content, dataChapterList[currentIndex + 1], false));

四、切换章节
切换章节有多种方案, 主要思路还是替换数组中的内容, 并刷新页面
我这里采用了一个最简单粗暴的方案:
1、清空数组L中所有数据
2、重新获取前后三章的数据
3、计算当前章节第一页的下标刷新当前页面内容

五、小结

小说翻页总体来讲逻辑还是比较复杂的,
由于功能点比较多又比较碎, 很容易产生各种bug 比如: 切换字体字号后当前页面的内容刷新问题、又比如快速翻页到章节变更的数据刷新问题
主要整体思路没问题剩下的只要细心豆可以搞定

flutter 小说翻页实现

推荐阅读更多精彩内容