Flutter中如何传递Riverpod Notifier Provider至其他类以更新状态

错误原因 #

你直接传递ref.read(globalsNotifierProvider.notifier)时，返回的是AlwaysAliveRefreshable<GlobalsNotifier>类型（一个可调用的包装对象），而非实际的GlobalsNotifier实例，而SideDrawer的参数要求是ProviderListenable类型，因此触发类型不匹配错误。

解决方案 #

方案1：让SideDrawer自行读取Notifier（推荐，符合Riverpod设计原则） #

Riverpod鼓励每个Widget通过自身的WidgetRef获取依赖，无需从父组件传递。将SideDrawer定义为ConsumerWidget，直接在内部读取notifier：

class SideDrawer extends ConsumerWidget {
  const SideDrawer({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 直接获取notifier实例
    final globalsNotifier = ref.read(globalsNotifierProvider.notifier);

    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: const Text('更新状态'),
            onTap: () {
              // 调用notifier的方法更新状态
              globalsNotifier.updateYourState();
            },
          ),
        ],
      ),
    );
  }
}

在MainScreen中直接使用SideDrawer即可，无需传递参数：

class MainScreen extends ConsumerWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      drawer: const SideDrawer(),
      // 其他页面内容
    );
  }
}

方案2：传递实际的Notifier实例（不推荐，仅适用于特殊场景） #

如果必须从父组件传递notifier，需要调用ref.read(globalsNotifierProvider.notifier)的返回值（加()）来获取实际实例：

在MainScreen中获取实例并传递：

class MainScreen extends ConsumerWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 调用()获取实际的GlobalsNotifier实例
    final globalsNotifier = ref.read(globalsNotifierProvider.notifier)();

    return Scaffold(
      drawer: SideDrawer(notifier: globalsNotifier),
      // 其他页面内容
    );
  }
}

SideDrawer接收notifier参数并使用：

class SideDrawer extends StatelessWidget {
  final GlobalsNotifier notifier;
  const SideDrawer({super.key, required this.notifier});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: const Text('更新状态'),
            onTap: () {
              notifier.updateYourState();
            },
          ),
        ],
      ),
    );
  }
}

方案3：传递Provider本身（适用于需监听状态+更新的场景） #

如果SideDrawer需要同时监听状态变化和更新状态，可以直接传递Provider对象：

MainScreen中传递Provider：

class MainScreen extends ConsumerWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      drawer: SideDrawer(provider: globalsNotifierProvider),
      // 其他页面内容
    );
  }
}

SideDrawer中监听状态并获取notifier：

class SideDrawer extends ConsumerWidget {
  final NotifierProvider<GlobalsNotifier, GlobalsState> provider;
  const SideDrawer({super.key, required this.provider});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 监听当前状态
    final currentState = ref.watch(provider);
    // 获取notifier实例
    final notifier = ref.read(provider.notifier);

    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: Text('当前状态：${currentState.yourValue}'),
            onTap: () {
              notifier.updateYourState();
            },
          ),
        ],
      ),
    );
  }
}

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