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

接下来，您的 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 方法

带有riverpod的多个状态的stateNotifier

1 个答案: