Flutter MVVM架构插件maac_mvvm的使用

maac_mvvm 是一个支持简单实现MVVM模式的包。该包不包含任何依赖注入框架。你可以选择任何你想要的依赖注入框架。它只有三个组件：ViewModel、StreamData 和 ViewModelWidget。

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

特性

ViewModelWidget

ViewModelWidget 是一个构建UI小部件的地方，这些小部件将与ViewModel绑定。

ViewModel

ViewModel 负责自动处理初始化、恢复、暂停和销毁。

StreamData

StreamData 是一个有用的Stream包装器，用于更新UI，并在ViewModel生命周期销毁时自动取消订阅。

开始使用

安装

flutter pub add maac_mvvm

使用说明

1 - 安装包

flutter pub add maac_mvvm

2 - 创建你的ViewModel

以下是一个简单的ViewModel，用于从小部件增加计数器。

class ExamplePageViewModel extends ViewModel {
  ExamplePageViewModel();

  late final _uiState = 0.mutableData(this);
  late final uiState = _uiState.streamData;

  void increaseCounter() {
    _uiState.postValue(_uiState.data + 1); // 增加计数器值
  }
}

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

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

• build 方法是构建界面的地方。
• createViewModel 方法是初始化对应的ViewModel的地方。

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

class ExamplePage extends ViewModelWidget<ExamplePageViewModel> {
  const ExamplePage({Key? key}) : super(key: key);

  [@override](/user/override)
  ExamplePageViewModel createViewModel(BuildContext context) => ExamplePageViewModel();

  [@override](/user/override)
  Widget build(BuildContext context, ExamplePageViewModel viewModel) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildCounterDisplay(viewModel),
            _buildButtonPlus(viewModel),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: viewModel.increaseCounter, // 绑定增加按钮的点击事件
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  Widget _buildButtonPlus(ExamplePageViewModel viewModel) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: ElevatedButton(
        onPressed: () {
          viewModel.increaseCounter();
        },
        child: const Text("+"),
      ),
    );
  }

  Expanded _buildCounterDisplay(ExamplePageViewModel viewModel) {
    return Expanded(
      child: Center(
        child: StreamDataConsumer<int>(
          streamData: viewModel.uiState,
          builder: (context, data) {
            return Text("You have pressed the button $data times.");
          },
        ),
      ),
    );
  }
}

4 - 监听ViewModel的数据变化

监听来自ViewModel的数据变化并使用StreamDataConsumer更新UI。

StreamDataConsumer 是一个监听数据流变化并相应地更新其UI的小部件。它可以用于从ViewModel显示数据并在数据变化时更新UI。

要使用StreamDataConsumer，首先需要在ViewModel中创建一个数据流。这可以通过使用StreamDataViewModel来完成。

一旦创建了数据流，可以将其作为参数传递给StreamDataConsumer小部件。StreamDataConsumer 将监听数据流的变化并相应地更新其UI。

例如，如果你在ViewModel中有一个计数器变量，你想在UI中显示它，可以为它创建一个StreamDataViewModel并传递给StreamDataConsumer小部件。每当计数器发生变化时，StreamDataConsumer 将更新其UI以显示新的值。

Expanded _buildCounterDisplay(ExamplePageViewModel viewModel) {
  return Expanded(
    child: Center(
      child: StreamDataConsumer<int>(
        streamData: viewModel.uiState,
        builder: (context, data) {
          return Text("You have pressed the button $data times.");
        },
      ),
    ),
  );
}

完整示例

class ExamplePage extends ViewModelWidget<ExamplePageViewModel> {
  const ExamplePage({Key? key}) : super(key: key);

  [@override](/user/override)
  ExamplePageViewModel createViewModel(BuildContext context) => ExamplePageViewModel();

  [@override](/user/override)
  Widget build(BuildContext context, ExamplePageViewModel viewModel) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            StreamDataConsumer<int>(
              builder: (context, data, child) {
                return Text(
                  '$data',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
              streamData: viewModel.uiState,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: viewModel.incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class ExamplePageViewModel extends ViewModel {
  ExamplePageViewModel();

  late final _uiState = 0.mutableData(this);
  late final uiState = _uiState.streamData;

  void incrementCounter() {
    _uiState.postValue(_uiState.data + 1);
  }
}