Flutter长文本分页实现及基于JSON的书籍类应用开发咨询

首先完成分散JSON内容的整合，保留内容顺序和样式属性，避免分页后样式丢失：

• 定义统一的书籍内容数据结构，匹配JSON字段映射规则
• 遍历所有JSON对象，过滤空内容后按章节顺序排序拼接
• 提取每个段落的字体、行高、字重等样式属性和文本绑定

class BookContent {
  final String chapterId;
  final String text;
  final TextStyle style;

  BookContent({required this.chapterId, required this.text, required this.style});
}

// 整合JSON数据的示例逻辑
List<BookContent> mergeJsonBookContent(List<dynamic> jsonList) {
  List<BookContent> contentList = [];
  for (var json in jsonList) {
    contentList.add(BookContent(
      chapterId: json['chapter_id'] ?? '',
      text: json['content'] ?? '',
      style: TextStyle(
        fontSize: json['font_size']?.toDouble() ?? 16,
        height: json['line_height']?.toDouble() ?? 1.5,
        fontWeight: json['is_bold'] == true ? FontWeight.bold : FontWeight.normal,
      ),
    ));
  }
  // 按章节ID排序保证内容顺序正确
  contentList.sort((a, b) => a.chapterId.compareTo(b.chapterId));
  return contentList;
}

核心用Flutter官方提供的TextPainter工具做文本布局测量，根据设备尺寸、阅读参数计算单页可容纳的内容：

• 先扣除页面边距、系统状态栏高度，得到单页可用显示区域尺寸
• 逐段喂入整合后的文本，计算当前页可容纳的最大字符位置，剩余内容划入下一页

List<String> paginateBookContent(String fullText, TextStyle textStyle, Size pageSize) {
  List<String> pages = [];
  int currentStart = 0;
  final textLength = fullText.length;

  while (currentStart < textLength) {
    final painter = TextPainter(
      text: TextSpan(text: fullText.substring(currentStart), style: textStyle),
      textDirection: TextDirection.ltr,
      maxLines: null,
    );
    painter.layout(maxWidth: pageSize.width);

    // 定位当前页能容纳的最后一个字符位置
    final endPosition = painter.getPositionForOffset(Offset(pageSize.width, pageSize.height)).offset;
    final currentEnd = currentStart + endPosition;
    pages.add(fullText.substring(currentStart, currentEnd));
    currentStart = currentEnd;
  }
  return pages;
}

用PageView组件实现类实体书的滑动翻页效果，适配手势交互：

class BookReaderPage extends StatefulWidget {
  final List<BookContent> contentList;
  const BookReaderPage({super.key, required this.contentList});

  @override
  State<BookReaderPage> createState() => _BookReaderPageState();
}

class _BookReaderPageState extends State<BookReaderPage> {
  List<String> pages = [];
  late Size pageSize;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 计算可用页面尺寸，预留上下左右16dp边距
    final screenSize = MediaQuery.of(context).size;
    pageSize = Size(screenSize.width - 32, screenSize.height - 32 - MediaQuery.of(context).padding.vertical);
    
    // 整合全量文本后执行分页
    final fullText = widget.contentList.map((e) => e.text).join('\n');
    pages = paginateBookContent(fullText, widget.contentList.first.style, pageSize);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: PageView.builder(
        physics: const BouncingScrollPhysics(),
        itemCount: pages.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(16),
            child: Text(pages[index], style: const TextStyle(fontSize: 16, height: 1.5)),
          );
        },
      ),
    );
  }
}

• 大文本分页计算放到compute隔离线程执行，避免阻塞主线程导致UI卡顿
• 缓存已计算完成的分页结果，同一本书二次打开无需重复计算
• 用户调整字号、行高等阅读参数后，重新触发分页计算
• 若内容包含富文本/图文混排，可将分页输入替换为TextSpan集合，TextPainter原生支持带样式、带图片占位的文本测量，核心分页逻辑无需修改
• 可扩展增加当前页码显示、进度条跳转、点击屏幕边缘翻页等功能

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