【Flutter】小说阅读器改版 —— 分页的改动

2,492 阅读2分钟

前言

小说阅读器的另一个重点就是这个分页逻辑;在之前的项目中,分页这块所做的事比较复杂:除了计算分页的部分外,还要绘制并生成picture缓存起来;

现在使用ListView来处理,倒是省了一个缓存picture的部分,因此带来一定的改动;

分析

首先是计算部分,看了下,还是之前的Textpainter的方式,不过好像性能确实提升了不少,严格来说,不应该说不少,而是非常巨大……

以这段为例:

image.png

按下面这段代码的注释来看,8000字的分页时长是12ms?(不知道是之前写的太烂,还是flutter 的底层真做了什么巨大的性能优化,还是说我写的这个demo有bug……)

image.png

image.png

如果按这个比例来说,1W字十几ms,手机屏幕能展示的文字最多也不过几百字,顶多上千;如果只计算当前页面的内容,耗时也不过1ms?

这好像直接放主isolate,然后每次itemBuilder需要构造widget的时候再去计算,并只计算一页的内容,也影响不大啊~

再结合之前在ListView中发现的那个根据速度判断是否需要显示图片的部分,改改也不会影响到快速滑动的部分;好像有点可行性;

不过先放放这部分的改动,简单总结一下分页的改动:

分页计算的整体逻辑没什么太大变化,但是由于现在使用ListView来处理,所以不再需要绘制并缓存整体节目,仅仅需要知道单页对应的内容即可;

剩下的由itemBuilder根据内容构造对应widget来处理;举个例子:

将内容组装为TextSpan,并设置到Text.rich 中,like this:

image.png

在这里,我将计算分页的内容部分减少了300高度,在itemBuilder的中加了一个高度300的Container;并以WidgetSpan的形式提供了进去;

效果嘛,也非常流畅,并没有什么太大问题

QQ20211215-164030-HD.gif

结尾

现在评估了下,好像分页这块现在对性能影响不大,甚至可以做到随时计算而不影响UI;

那么接下来我尝试将这部分改造为每次只计算一页的内容的方式,看看是否像评估中的那样完全没有性能压力