Flutter响应式编程与MVVM架构插件easy_rxmvvm的使用

Flutter响应式编程与MVVM架构插件easy_rxmvvm的使用

easy_rxmvvm 是一个基于 rxdart 的 MVVM 框架，它可以帮助开发者更方便地实现响应式编程和管理 UI 状态。本文将通过示例来展示如何使用 easy_rxmvvm 插件。

示例

首先，让我们来看一下如何使用 easy_rxmvvm 来构建一个简单的应用。以下是一个完整的示例代码，展示了如何使用 easy_rxmvvm 创建一个带有登录状态的主页面，并列出一些演示项供用户点击。

// 忽略打印警告
import 'package:easy_rxmvvm/easy_rxmvvm.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:rxmvvm_example/bind/bind_page.dart';
import 'package:rxmvvm_example/event_bus/event_bus_page.dart';
import 'package:rxmvvm_example/paging/paging_page.dart';
import 'package:rxmvvm_example/todo/todo_list/todo_list_page.dart';
import 'package:rxmvvm_example/vm/login_vm.dart';

import 'counter/counter_page.dart';
import 'inherited/inherited_page.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 定义演示项目列表
  get demoList => [
        DemoItem("共享", (context) => const InheritedPage()),
        DemoItem("计数器", (context) => const CounterPage()),
        DemoItem("双向绑定", (context) => const BindPage()),
        DemoItem("分页请求", (context) => const PagingPage()),
        DemoItem("EventBus", (context) => const EventBusPage()),
        DemoItem("TodoList", (context) => const TodoListPage()),
      ];

  @override
  Widget build(BuildContext context) {
    // 使用 ViewModelConsumer 构建 UI
    return ViewModelConsumer(
      creators: [
        ViewModelFactory<LoginManagerViewModel>(() => LoginManagerViewModel())
      ],
      shareStrategy: ViewModelShareStrategy.provider,
      builder: (context, child) {
        final loginViewModel = context.getViewModel<LoginManagerViewModel>();
        if (loginViewModel == null) {
          return const SizedBox.shrink();
        }

        // 构建主页面
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          builder: EasyLoading.init(),
          home: Scaffold(
            appBar: AppBar(
              title: StreamBuilderFactory.buildBehavior(loginViewModel.isLogin,
                  builder: (context, value, _) {
                return Text('登录状态: ${value ? '已登录' : '未登录'}');
              }),
            ),
            body: ListView.builder(
              itemBuilder: (context, index) {
                final item = demoList[index];
                return ListTile(
                  title: Text(item.title),
                  onTap: () => item.push(context),
                );
              },
              itemCount: demoList.length,
            ),
          ),
        );
      },
    );
  }
}

// 定义演示项类
class DemoItem {
  final String title;
  final WidgetBuilder builder;

  DemoItem(this.title, this.builder);

  void push(BuildContext context) {
    Navigator.of(context).push(CupertinoPageRoute(builder: builder));
  }
}

许可证

本项目采用 MIT 许可证。

代码块

为了方便在 VSCode 中使用代码块，您可以按照以下步骤进行配置：

1. 打开 VSCode。
2. 按下快捷键 Ctrl + Shift + P 打开命令面板。
3. 输入 Snippets: Configure Snippets 并选择。
4. 选择 dart.json 文件。
5. 在 dart.json 文件中添加以下代码块：

{
  "Consumer ViewModel": {
    "prefix": "rxvmConsumers",
    "description": "创建支持提供多个viewModel的StatefulWidget",
    "body": [
      "class $1 extends ViewModelConsumerStatefulWidget {",
      "\tconst $1({super.key});",
      "\n",
      "\t@override",
      "\tViewModelConsumerStateMixin<$1> createState() => _$1State();",
      "}\n",
      "class _$1State extends State<$1> with DisposeBagProvider, ViewModelConsumerStateMixin<$1> {",
      "\t@override",
      "\tWidget build(BuildContext context) {",
      "\t\treturn Container();",
      "\t}",
      "\n",
      "\t@override",
      "\t// TODO: implement creaters",
      "\tList<ViewModelFactory<ViewModel>> get creators => throw UnimplementedError();",
      "}"
    ]
  },
  "Consumer SingleViewModel": {
    "prefix": "rxvmConsumer",
    "description": "创建支持提供单个viewModel的StatefulWidget",
    "body": [
      "class $1 extends ViewModelConsumerStatefulWidget {",
      "\tconst $1({super.key});",
      "\n",
      "\t@override",
      "\tViewModelConsumerStateMixin<$1> createState() => _$1State();",
      "}\n",
      "class _$1State extends State<$1> with DisposeBagProvider, ViewModelConsumerStateMixin<$1>, SingleViewModelMixin<$2, $1> {",
      "\t@override",
      "\tWidget build(BuildContext context) {",
      "\t\treturn Container();",
      "\t}",
      "\n",
      "\t@override",
      "\t$2 viewModelCreate() => $2();",
      "}"
    ]
  },
  "Consumer RetrieveViewModel": {
    "prefix": "rxvmConsumerRetrive",
    "description": "创建只获取单个viewModel的StatefulWidget",
    "body": [
      "class $1 extends ViewModelConsumerStatefulWidget {",
      "\tconst $1({super.key});",
      "\n",
      "\t@override",
      "\tViewModelConsumerStateMixin<$1> createState() => _$1State();",
      "}\n",
      "class _$1State extends State<$1> with DisposeBagProvider, ViewModelConsumerStateMixin<$1>, RetrieveViewModelMixin<$2, $1> {",
      "\t@override",
      "\tWidget build(BuildContext context) {",
      "\t\treturn Container();",
      "\t}",
      "}"
    ]
  },
  "Rxvvm ViewModel Class": {
    "prefix": "rxvmViewModel",
    "description": "创建一个 ViewModel",
    "body": [
      "class $1ViewModel extends ViewModel {",
      "\t@override",
      "\tvoid config() {",
      "\t\t// TODO: implement config",
      "\t}",
      "}"
    ]
  },
  "ViewModelFactory Creation": {
    "prefix": "rxvmFactory",
    "description": "创建一个 ViewModelFactory 实例",
    "body": ["ViewModelFactory<${1:ViewModel}>(${2:() => ${1}()})"]
  }
}