如何使用flutter_hooks实现数据获取与跨页面刷新？

需求场景 #

• 将数据获取并存储到Model中，支持随时刷新数据
• 允许在不同页面触发数据刷新操作

初始实现及存在的问题 #

以下是初始的可运行代码，但存在refresh变量无法与数据逻辑一起封装为自定义Hook的问题：

页面类代码 #

class NewPage extends HookWidget{
  @override
  Widget build(BuildContext context) {
    final holder=useState<ModelHolder>(ModelHolder()).value;
    final notifier=useListenable(holder.notifier);
    final model=notifier.value;
    final refresh=useState<bool>(false);
    useEffect(()  {
      print('refetching');
      holder.fetch();
    },[refresh.value]);
    print('model:$model, ${model.hashCode}');
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          refresh.value=!refresh.value;//trigger refresh
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

ModelHolder类代码 #

class ModelHolder {
  final ValueNotifier<Model?> notifier = ValueNotifier<Model?>(null);

  void fetch() async {
    await Future.delayed(const Duration(seconds: 2));//模拟服务端请求
    notifier.value=Model('data');
  }
}

Model类代码 #

class Model{
  final String value;
  Model(this.value);
}

优化方案：封装自定义Hook #

将refresh变量移至ModelHolder内部，即可将所有数据逻辑封装为可复用的自定义Hook，同时支持跨页面触发刷新：

修改后的ModelHolder类 #

class ModelHolder {
  final ValueNotifier<bool> refresher;
  final ValueNotifier<Model?> notifier = ValueNotifier<Model?>(null);

  ModelHolder(this.refresher);

  void fetch() async {
    await Future.delayed(const Duration(seconds: 2));//模拟服务端请求
    notifier.value=Model('data');
  }
}

自定义Hook代码 #

ModelHolder useModel(){
  final refresh=useState<bool>(false);
  final holder=useState(ModelHolder(refresh)).value;
  useListenable(holder.notifier);
  useEffect(()  {
    print('refetching');
    holder.fetch();
  },[refresh.value]);
  return holder;
}

页面使用方式 #

Widget build(BuildContext context) {
    final holder=useModel();
    // 后续可通过holder.notifier.value获取Model数据
    // 跨页面触发刷新时，只需调用holder.refresher.value = !holder.refresher.value
    ...
}

此方案将数据获取、状态管理逻辑完全封装在自定义Hook中，同时可以通过传递ModelHolder实例到其他路由，实现跨页面触发数据刷新的需求。

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