带有 Riverpod 的多个状态的 stateNotifier答案

【问题标题】：stateNotifier for multiple states with riverpod带有 Riverpod 的多个状态的 stateNotifier
【发布时间】：2021-01-16 15:22:23
【问题描述】：

我对如何将 stateNotifier 与 Riverpod 一起使用感到困惑。那里的大多数教程都使用了反例，这很好，但对我来说仍然不是很清楚。我正在尝试实现具有 2 个状态的 stateNotifier： isDrawerOpen 和 isDrawerColor 返回布尔结果。一些函数会触发这些状态的变化。以下是我已经实现的内容，并且可以真正使用一些说明。

import 'package:flutter_riverpod/all.dart';

class DrawerNotifier extends StateNotifier{

  DrawerNotifier() : super(false);

  bool isDrawerOpen = false;
  bool isDrawerColor = false;
  
  void toggleDrawer() {
    isDrawerOpen = !isDrawerOpen;
  }
  void toggleColor() {
    isDrawerColor = !isDrawerColor;
  }
}

final drawerProvider = StateNotifierProvider((_) => DrawerNotifier());

final isDrawerOpen = StateNotifierProvider((ref){
  final state = ref.watch(drawerProvider);
  return state.isDrawerOpen;
});

final isDrawerColor = StateNotifierProvider((ref){
  final state = ref.watch(drawerProvider);
  return state.isDrawerColor;
});

【问题讨论】：

标签： flutter dart flutter-provider riverpod

【解决方案1】：

您可以如下创建一个单独的状态类（我使用的是 equattable 包）

abstract class DrawerState extends Equatable {
  DrawerState();
  }
class IsDrawerOpen extends DrawerState {
 UserFetchInitial();

 @override
 List<Object> get props => [];
}
class IsDrawerClosed extends DrawerState {
 UserFetched();

 @override
 List<Object> get props => [];
}

接下来，您的drawerProvider 将如下所示。我们将创建一个抽屉控制器来控制抽屉的状态。

final drawerProvider = StateNotifierProvider<DrawerController>((_) => DrawerNotifier());

我们的 DrawerController 将如下所示。

class DrawerController extends StateNotifier<DrawerState> { 
  void changeDrawer(bool isDrawerOpened) {
   if(isDrawerOpened) {
      state = IsDrawerOpen();
    } else { 
        state = IsDrawerClosed();
      }
  }
}

您可以使用 context.read(drawerProvider).changeDrawer(true); 在 UI 中的任何位置调用 changeDrawer 方法

【讨论】：