使用 Riverpod 实现多个状态的 stateNotifier

Question

我对如何将 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;
});

Answer 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 => [];
}

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

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

我们的 DrawerController 将如下所示。

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

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