Flutter中RefreshIndicator与异步同步的页面刷新问题

核心思路 #

问题根源在于页面销毁后，原监听失效且同步状态未持久化。通过在ChangeNotifier中保存同步状态和数据状态，并在页面初始化时重新监听、检查状态，即可解决两个问题。

1. 定义全局存活的ChangeNotifier #

确保同步逻辑和状态跨页面持久化，避免页面销毁后状态丢失：

class SyncNotifier extends ChangeNotifier {
  List<Item> _items = [];
  bool _isSyncing = false; // 标记是否正在同步
  bool _hasNewData = false; // 标记是否有未读取的新数据

  List<Item> get items => _items;
  bool get isSyncing => _isSyncing;
  bool get hasNewData => _hasNewData;

  Future<void> syncData() async {
    if (_isSyncing) return;
    _isSyncing = true;
    _hasNewData = false;
    notifyListeners();

    try {
      // 替换为实际API调用
      await Future.delayed(const Duration(seconds: 3));
      final newItems = await ApiService.fetchItems();
      _items = newItems;
      _hasNewData = true;
    } catch (e) {
      // 错误处理
    } finally {
      _isSyncing = false;
      notifyListeners();
    }
  }

  // 标记新数据已读取，避免重复刷新
  void markDataRead() {
    _hasNewData = false;
    notifyListeners();
  }
}

在应用根节点提供这个实例，保证全局存活：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => SyncNotifier(),
      child: const MyApp(),
    ),
  );
}

2. 列表页实现逻辑 #

同步完成后刷新列表 #

• 页面初始化时添加ChangeNotifier监听，自动检查是否有新数据
• 收到同步完成通知时，更新UI并标记数据已读取

同步进行中显示刷新指示器 #

• 使用GlobalKey控制RefreshIndicator的显示状态
• 页面初始化时检查同步状态，若正在同步则主动触发刷新指示器

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

  @override
  State<ItemListPage> createState() => _ItemListPageState();
}

class _ItemListPageState extends State<ItemListPage> {
  final GlobalKey<RefreshIndicatorState> _refreshKey = GlobalKey();
  late SyncNotifier _syncNotifier;
  late VoidCallback _listener;

  @override
  void initState() {
    super.initState();
    _syncNotifier = Provider.of<SyncNotifier>(context, listen: false);
    
    // 定义监听回调
    _listener = () {
      if (!mounted) return;
      setState(() {});
      
      // 同步完成且有新数据时，标记为已读
      if (_syncNotifier.hasNewData) {
        _syncNotifier.markDataRead();
      }
      
      // 同步进行中时，显示刷新指示器
      if (_syncNotifier.isSyncing) {
        _refreshKey.currentState?.show();
      }
    };
    _syncNotifier.addListener(_listener);

    // 页面初始化时检查状态
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 有新数据则刷新UI
      if (_syncNotifier.hasNewData) {
        setState(() {});
        _syncNotifier.markDataRead();
      }
      // 正在同步则显示指示器
      if (_syncNotifier.isSyncing) {
        _refreshKey.currentState?.show();
      }
    });
  }

  @override
  void dispose() {
    // 移除监听，避免内存泄漏
    _syncNotifier.removeListener(_listener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('列表页')),
      body: RefreshIndicator(
        key: _refreshKey,
        onRefresh: _syncNotifier.syncData,
        child: ListView.builder(
          itemCount: _syncNotifier.items.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(_syncNotifier.items[index].name));
          },
        ),
      ),
    );
  }
}

关键细节说明 #

• mounted判断：在监听回调中先检查页面是否挂载，避免setState在dispose后调用的异常
• 状态持久化：isSyncing和hasNewData确保页面重新进入时能获取同步状态和数据状态
• GlobalKey控制指示器：通过_refreshKey.currentState?.show()主动触发刷新指示器显示

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