Flutter MVVM架构插件simple_mvvm的使用

Flutter MVVM架构插件simple_mvvm的使用

简介

Simple MVVM 是一个简洁且强大的状态管理库，它将MVVM结构与Flutter框架中的InheritedWidget相结合。该库允许你在Flutter应用中更方便地管理状态。

特性

• 纯Flutter：ViewModelProviders 是 InheritedWidgets，因此你可以通过Flutter框架内置的方法访问它们。
• 易于模型使用：ViewModelProvider 提供了你的模型到其子部件，所以你通常不需要添加额外的代码来访问模型。
• 无冗余：整个库只有60行Dart代码，没有任何外部依赖。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  simple_mvvm: ^版本号

然后运行 flutter pub get 来安装依赖。

示例代码

以下是 simple_mvvm 的完整示例代码。

1. 创建 ViewModel

首先，创建一个 ViewModel 类。这个类是一个 State 对象，并引入了一个 InheritedWidget 到Widget树中。在这个类中，你可以放置业务逻辑和状态属性。

import 'package:simple_mvvm/simple_mvvm.dart';
import 'package:flutter/material.dart';

class HomeViewModel extends ViewModel<HomeViewModel> {
  static HomeViewModel of_(BuildContext context) => getModel<HomeViewModel>(context);

  final String title = 'Home';

  ValueNotifier<int> counter = ValueNotifier(0);

  void incrementCounter() {
    setState(() {
      counter.value++;
    });
  }

  [@override](/user/override)
  void initState() {
    debugPrint('Initialize');
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    debugPrint('Dispose');
    super.dispose();
  }
}

2. 创建 ViewModelBuilder

接下来，创建一个 ViewModelBuilder 类。这个类是一个 StatefulWidget，它会包含上述的 ViewModel。

class HomeViewModelBuilder extends ViewModelBuilder<HomeViewModel> {
  const HomeViewModelBuilder({
    super.key,
    required super.builder,
  });

  [@override](/user/override)
  State<StatefulWidget> createState() => HomeViewModel();
}

3. 使用 ViewModelBuilder

最后，在你的应用中使用 ViewModelBuilder。你可以在任何地方访问 ViewModel。

import 'package:simple_mvvm/simple_mvvm.dart';
import 'package:example/two.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple MVVM',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeView(),
    );
  }
}

class HomeView extends StatelessWidget {
  const HomeView({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return HomeViewModelBuilder(
      builder: (context, model) {
        return Scaffold(
          appBar: AppBar(
            title: Text(model.title),
          ),
          body: Stack(
            children: [
              Center(
                child: Padding(
                  padding: const EdgeInsets.all(24.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      ValueListenableBuilder(
                          valueListenable: model.counter,
                          builder: (context, value, child) => Row(
                                children: [
                                  const Text('ValueListenableBuilder: '),
                                  const SizedBox(width: 8),
                                  Text(value.toString()),
                                ],
                              )),
                      const SeparatedCounter(),
                      const ModelWidgetCounter(),
                      const SizedBox(height: 16),
                      ElevatedButton(
                        onPressed: model.isLoading
                            ? () {}
                            : () async {
                                HomeViewModel().of(context).incrementCounterWithSetState();
                                model.setLoading(false);
                              },
                        child: const Text('Increment using setState'),
                      ),
                      ElevatedButton(
                        onPressed: model.isLoading
                            ? () {}
                            : () {
                                model.incrementCounterWithValueNotifier();
                              },
                        child: const Text('Increment using ValueNotifier'),
                      )
                    ],
                  ),
                ),
              ),
              if (model.isLoading) const ColoredBox(color: Colors.black12, child: Center(child: CircularProgressIndicator()))
            ],
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const ScreenTwoView(),
                ),
              );
            },
            child: const Icon(Icons.navigate_next),
          ),
        );
      },
    );
  }
}

class SeparatedCounter extends StatelessWidget {
  const SeparatedCounter({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Row(
      children: [
        const Text('SeparatedCounter: '),
        const SizedBox(width: 8),
        Text(HomeViewModel().of(context).counter.value.toString()),
      ],
    );
  }
}

class ModelWidgetCounter extends StatelessWidget {
  const ModelWidgetCounter({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ModelWidget<HomeViewModel>(builder: (context, model) {
      return Row(
        children: [
          const Text('ModelWidgetCounter: '),
          const SizedBox(width: 8),
          Text(model.counter.value.toString()),
        ],
      );
    });
  }
}