Flutter PageView.builder文本重复问题，如何拆分文本实现正常分页展示

你现在的代码里，PageView.builder的每个item都遍历了全部经文节点，没有根据页面索引index过滤当前页要展示的内容，同时没有配置总页数参数itemCount，所以所有页面渲染的内容完全一致，自然会出现翻页重复的问题。

1. 固定节数分页（实现成本最低） #

先设定每页展示的经文节数，根据总节数计算总页数，再按页面索引过滤要展示的经文范围即可，修正后代码如下：

import 'dart:math';

// 可根据排版需求调整每页展示的经文节数
final int versePerPage = 8;
// 计算总页数
final int totalPage = (count / versePerPage).ceil();

Container(
  height: height,
  width: width,
  child: PageView.builder(
    // 配置总页数
    itemCount: totalPage,
    itemBuilder: (context, index){
      // 计算当前页的经文起始、结束序号
      int startVerse = index * versePerPage + 1;
      int endVerse = min((index + 1) * versePerPage, count);
      return RichText(
        textDirection: TextDirection.rtl,
        text: TextSpan(
          text: '',
          style: DefaultTextStyle.of(context).style,
          children: <TextSpan>[
            // 只遍历当前页范围内的经文
            for (var i = startVerse; i <= endVerse; i++) ...{
              TextSpan(
                text: quran.getVerse(widget.id, i, verseEndSymbol: false),
                style: TextStyle(
                  fontSize: 26,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'kitab'
                ),
              ),
              TextSpan(
                text: quran.getVerseEndSymbol(i),
                style: TextStyle(
                  color: Colors.cyanAccent,
                  fontSize: 26,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'kitab',
                ),
              ),
            }
          ],
        ),
      );
    }
  ),
);

注：如果需要适配不同屏幕尺寸自动调整每页内容量，可使用TextPainter提前计算文本高度，逐节累加内容直到超出容器高度，完成自动分页后再把拆分后的每页内容传给PageView渲染即可。

内容的提问来源于stack exchange，提问作者Mohammed Bekele