Flutter中如何实现PageFlip阅读器的阅读进度持久化？

要实现退出应用后重新进入恢复阅读位置的需求，我们可以通过持久化存储+反射获取当前页码的方式来实现，具体步骤如下：

1. 添加依赖 #

在pubspec.yaml中引入shared_preferences用于轻量级数据持久化：

dependencies:
  flutter:
    sdk: flutter
  page_flip: ^0.1.5
  shared_preferences: ^2.2.2

2. 修改代码实现进度保存与恢复 #

核心逻辑： #

• 用SharedPreferences持久化存储当前页码
• 通过反射获取PageFlipWidget内部的私有页码变量（组件未暴露相关API）
• 监听应用生命周期，在后台时自动保存进度
• 页面初始化时读取保存的页码并跳转

修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:page_flip/page_flip.dart';
import 'package:shared_preferences/shared_preferences.dart';

// 扩展方法：用于访问组件内部私有变量
extension PrivateFieldAccess on Object {
  dynamic getPrivateField(String fieldName) {
    final field = runtimeType.declaredFields.firstWhere((f) => f.name == fieldName);
    return field.get(this);
  }
}

final _controller = GlobalKey<PageFlipWidgetState>();

class AChristmasCarol extends StatefulWidget {
  const AChristmasCarol({super.key});

  @override
  State<AChristmasCarol> createState() => _AChristmasCarolState();
}

class _AChristmasCarolState extends State<AChristmasCarol> with WidgetsBindingObserver {
  final List<String> imagePaths = [
    'assets/books/A Christmas Carol/page 1.png',
    'assets/books/A Christmas Carol/page 2.png',
    'assets/books/A Christmas Carol/page 3.png',
    'assets/books/A Christmas Carol/page 4.png',
    'assets/books/A Christmas Carol/page 5.png',
    'assets/books/A Christmas Carol/page 6.png',
    'assets/books/A Christmas Carol/page 7.png',
    'assets/books/A Christmas Carol/page 8.png',
    'assets/books/A Christmas Carol/page 9.png',
    'assets/books/A Christmas Carol/page 10.png',
    // 按需添加更多页面
  ];
  
  late SharedPreferences _prefs;
  int _savedPage = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _initPrefs();
  }

  // 初始化存储并读取保存的页码
  Future<void> _initPrefs() async {
    _prefs = await SharedPreferences.getInstance();
    _savedPage = _prefs.getInt('christmas_carol_page') ?? 0;
    // 页面渲染完成后跳转到保存的页码
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _controller.currentState?.goToPage(_savedPage);
    });
  }

  // 保存当前页码到本地
  Future<void> _saveCurrentPage() async {
    final currentState = _controller.currentState;
    if (currentState != null) {
      // 反射获取组件内部的私有页码变量
      final currentPage = currentState.getPrivateField('_currentPageIndex') as int;
      await _prefs.setInt('christmas_carol_page', currentPage);
    }
  }

  // 监听应用生命周期，进入后台时自动保存进度
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.paused) {
      _saveCurrentPage();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    // 页面销毁前再次保存进度
    _saveCurrentPage();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageFlipWidget(
        key: _controller,
        backgroundColor: Colors.white,
        lastPage: Container(
            color: Colors.white, child: const Center(child: Text('结束！'))),
        children: [
          for (var imagePath in imagePaths) _buildDemoPage(imagePath),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.looks_one_outlined),
        onPressed: () {
          _controller.currentState?.goToPage(1);
          // 手动跳转后立即保存页码
          _saveCurrentPage();
        },
      ),
    );
  }

  Widget _buildDemoPage(String imagePath) {
    return Scaffold(
      body: Image.asset(
        imagePath,
        fit: BoxFit.cover,
      ),
    );
  }
}

3. 关键说明 #

• 反射访问私有变量：由于PageFlip组件未提供获取当前页码的公开API，我们通过扩展方法读取其内部的_currentPageIndex私有变量，实现对当前阅读位置的获取。
• 生命周期监听：通过WidgetsBindingObserver监听应用进入后台的状态，自动触发进度保存；同时在页面销毁前也执行保存，确保进度不会丢失。
• 持久化存储：使用SharedPreferences存储页码，这是Flutter中处理轻量级状态存储的首选方案，操作简单且性能可靠。

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