Flutter MVVM架构与状态管理插件maac_mvvm_with_riverpod的使用

Flutter MVVM架构与状态管理插件maac_mvvm_with_riverpod的使用

maac_mvvm_with_riverpod 是一个扩展包，用于与 RiverPod 一起使用的 maac_mvvm 包。此包保留了 maac_mvvm 包中的架构和组件，如 ViewModel、StreamData 和 ViewModelWidget，并添加了支持 RiverPod 的额外组件，如 ConsumerViewModelWidget 和 RiverViewModel。

它简单、干净且易于实现。

请参阅 maac_mvvm

特性

ConsumerViewModelWidget

用于构建绑定到 ViewModel 的 UI 小部件的地方。

RiverViewModel

持有与其绑定的小部件的逻辑和生命周期，并继承自 maac_mvvm 的 ViewModel 类。

开始使用

安装

在 pubspec.yaml 文件中安装：

flutter pub add maac_mvvm_with_riverpod

使用方法

1 - 安装包

flutter pub add maac_mvvm_with_riverpod

2 - 创建你的 ViewModel

通过继承 RiverViewModel 来创建 ViewModel，以便管理小部件的逻辑和生命周期。此 ViewModel 将可以访问 RiverViewModel 中定义的状态和方法，以及 maac_mvvm 的 ViewModel 中定义的方法。以下是一个简单的 ViewModel，用于从小部件中增加计数器。

final _exampleUIStateProvider = StateProvider.autoDispose<ExamplePageUIState>((ref) {
  return ExamplePageUIState();
});

final exampleViewModelProvider = Provider.autoDispose<ExamplePageViewModel>((ref) {
  return ExamplePageViewModel(uiState: ref.watch(_exampleUIStateProvider.notifier));
});

class ExamplePageUIState {
  int counter;

  ExamplePageUIState({this.counter = 0});

  ExamplePageUIState copyWith({int? counter}) {
    return ExamplePageUIState(
      counter: counter ?? this.counter,
    );
  }
}

class ExamplePageViewModel extends RiverViewModel<ExamplePageUIState> {
  ExamplePageViewModel({required super.uiState});
}

3 - 创建绑定到 ViewModel 的小部件

ConsumerViewModelWidget 只包含两个方法：createViewModel 和 build。

• buildWidget 方法用于构建界面。
• viewModelProvider 方法用于提供 ViewModel 提供者。

与 maac_mvvm 类似，我们不必担心小部件的其他生命周期，因为它们会根据 ViewModel 自动调用。

class ExamplePage extends ConsumerViewModelWidget<ExamplePageViewModel> {
  const ExamplePage({super.key});
  
  [@override](/user/override)
  AutoDisposeProvider<ExamplePageViewModel> viewModelProvider() => exampleViewModelProvider;
  
  [@override](/user/override)
  Widget buildWidget(BuildContext context, WidgetRef ref, ExamplePageViewModel viewModel) {
    return BuildYourPageWidget();
  }
}

如果小部件有传递的属性并且需要传递给 ViewModel，我们可以覆盖 awake 方法。

awake 方法将在 ViewModelWidget 的 createViewModel 方法之后立即调用，并在 ViewModel 的 onInitState 方法之前调用。这将有助于设置必要的数据。

class ExamplePage extends ConsumerViewModelWidget<ExamplePageViewModel> {
  final int initValue;
  const ExamplePage({super.key, required this.initValue});

  [@override](/user/override)
  AutoDisposeProvider<ExamplePageViewModel> viewModelProvider() => exampleViewModelProvider;

  [@override](/user/override)
  void awake(WidgetRef ref, ExamplePageViewModel viewModel) => viewModel.setup(initValue);
  
  [@override](/user/override)
  Widget buildWidget(BuildContext context, WidgetRef ref, ExamplePageViewModel viewModel) {
    return BuildYourPageWidget();
  }
}

4 - 监听来自 ViewModel 的数据更改

要从 ViewModel 中监听数据更改，我们可以使用 RiverPod 提供的组件。由于 RiverPod 是一个状态管理库，我们可以使用默认的 RiverViewModel 中提供的 StateController 来更新 UI。

在以下示例中，ExamplePageViewModel 将增加计数器并通过 uiState 更新 UI。ViewModel 还将暴露 counterSelector 供 Widget 监听并更新。

class ExamplePageViewModel extends RiverViewModel<ExamplePageUIState> {
  ExamplePageViewModel({required super.uiState});

  final counterSelector = _exampleUIStateProvider.select((value) => value.counter);

  void incrementCounter() {
    uiState.update((state) => state.copyWith(counter: state.counter + 1));
  }
}

您可以使用 RiverPod 提供的组件（例如 ConsumerWidget）来更新 UI。

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

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(exampleViewModelProvider);
    final counter = ref.watch(viewModel.counterSelector);
    return Text(
      '$counter',
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}

完整示例

class ExamplePage extends ConsumerViewModelWidget<ExamplePageViewModel> {
  const ExamplePage({super.key});

  [@override](/user/override)
  AutoDisposeProvider<ExamplePageViewModel> viewModelProvider() => exampleViewModelProvider;

  [@override](/user/override)
  Widget buildWidget(BuildContext context, WidgetRef ref, ExamplePageViewModel viewModel) {
    final counter = ref.watch(viewModel.counterSelector);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            // 监听 counterSelector 更新 UI
            Consumer(
              builder: (context, ref, child) {
                final counter = ref.watch(viewModel.counterSelector);
                return Text(
                  '$counter',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: viewModel.incrementCounter, // 调用 ViewModel 中的 incrementCounter 函数
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 这个尾随逗号使自动格式化更美观
    );
  }
}

final _exampleUIStateProvider = StateProvider.autoDispose<ExamplePageUIState>((ref) {
  return ExamplePageUIState();
});

final exampleViewModelProvider = Provider.autoDispose<ExamplePageViewModel>((ref) {
  return ExamplePageViewModel(uiState: ref.watch(_exampleUIStateProvider.notifier));
});

class ExamplePageUIState {
  int counter;

  ExamplePageUIState({this.counter = 0});

  ExamplePageUIState copyWith({int? counter}) {
    return ExamplePageUIState(
      counter: counter ?? this.counter,
    );
  }
}

class ExamplePageViewModel extends RiverViewModel<ExamplePageUIState> {
  ExamplePageViewModel({required super.uiState});
  // 暴露一个选择器供 Widget 监听和更新
  final counterSelector = _exampleUIStateProvider.select((value) => value.counter);
  
  void incrementCounter() {
    // 更新 uiState 以反映新的计数值
    uiState.update((state) => state.copyWith(counter: state.counter + 1));
  }
}