Flutter视图模型管理插件view_model_x的使用

Flutter视图模型管理插件view_model_x的使用

1. 安装和引入

首先，你需要在你的项目中安装 view_model_x 插件。打开终端或命令行工具，运行以下命令：

flutter pub add view_model_x

然后，在你的 pubspec.yaml 文件中添加依赖项：

dependencies:
  view_model_x: ^x.x.x

2. 示例代码

下面是一个完整的示例代码，展示了如何使用 view_model_x 插件来管理视图模型。

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

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

class CounterViewModel extends ViewModel {
  // 初始化 StateFlow
  final counterStateFlow = 1.stf();

  // 初始化 SharedFlow
  final messageSharedFlow = shf<String>();

  void increment() {
    // 通过更改值，监听器被通知
    counterStateFlow.value = counterStateFlow.value + 1;
  }

  void showPopupMessage() {
    // 通过发出值，监听器被通知
    messageSharedFlow.emit("Hello from CounterViewModel!");
  }

  @override
  void dispose() {
    // 必须释放所有流
    counterStateFlow.dispose();
    messageSharedFlow.dispose();
  }
}

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

  // 这个 widget 是你应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ViewModel Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          color: Colors.blue.shade100,
        ),
        useMaterial3: true,
        colorSchemeSeed: Colors.blue,
      ),
      home: ViewModelProvider(
          create: (context) => CounterViewModel(), child: const HomePage()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ViewModel Example')),
      // 在代码中的任何地方实现 SharedFlowListener 来监听共享流的发出
      body: SharedFlowListener(
        // 传递你的共享流
        sharedFlow: context.vm<CounterViewModel>().messageSharedFlow,
        listener: (context, value) {
          // 获取发出的值。在这种情况下 <String>"Hello from ViewModel!"
          ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text(value)));
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const MoreExamplesSection(),
            Expanded(
              child: Center(
                // 实现 ViewModelBuilder 来根据 StateFlow 值的变化/更新重建文本
                child: StateFlowBuilder(
                    // 传递你的 StateFlow
                    stateFlow: ViewModelProvider.of<CounterViewModel>(context)
                        .counterStateFlow,
                    builder: (context, value) {
                      return Text(
                        "$value",
                        style: const TextStyle(fontSize: 30),
                      );
                    }),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          IconButton(
            color: Theme.of(context).colorScheme.primary,
            onPressed: () {
              // 调用 CounterViewModel 中的 showPopupMessage 函数
              ViewModelProvider.of<CounterViewModel>(context)
                  .showPopupMessage();
            },
            icon: const Icon(Icons.mail_outline),
          ),
          const SizedBox(width: 12),
          FloatingActionButton(
            onPressed: () {
              // 调用 CounterViewModel 中的 increment 函数
              context.vm<CounterViewModel>().increment();
            },
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

3. 使用说明

• StateFlow：用于存储值并在其变化时通知监听器。可以改变值或更新值（对于列表或映射，需要更新现有对象而不是重新签名值）。

  myStateFlow.value = 5; // 监听器自动通知
  

• SharedFlow：用于向监听器发送数据。可以发出值。

  mySharedFlow.emit("Hello from ViewModel!"); // 监听器自动通知
  

• ViewModelProvider：用于包裹带有自定义 ViewModel 的的 widget。这需要 create 方法接受自定义 ViewModel 和子 widget。

  ViewModelProvider(
    create: (context) => counterViewModel, // 提供自定义 viewModel
    child: ChildWidget(),
  )
  

• StateFlowBuilder：用于根据 StateFlow 的值变化/更新重建 widget。

  StateFlowBuilder(
    stateFlow: context.vm<CustomViewModel>().myStateFlow, // 传递 StateFlow
    builder: (context, value) {
      return ChildWidget(value); // 根据更新/变化的值重建 widget。
    },
  )
  

• StateFlowConsumer：用于根据 StateFlow 的值变化/更新重建 widget 并调用监听器。

  StateFlowConsumer(
    stateFlow: ViewModelProvider.of<CustomViewModel>(context).myStateFlow, // 传递 StateFlow
    listener: (context, value) {
      // 根据值执行操作
    },
    builder: (context, value) {
      return ChildWidget(value); // 根据更新/变化的值重建 widget。
    },
  )
  

• MultiFlowListener：合并多个 SharedFlowListener 和 StateFlowListener，提高可读性并消除多层监听器的需求。

  MultiFlowListener(
    providers: [
      SharedFlowListener(
        sharedFlow: context.vm<ViewModelA>().mySharedFlow,
        listener: (context, value) {
          // 根据值执行操作
        },
      ),
      StateFlowListener(
        stateFlow: context.vm<ViewModelA>().myStateFlow,
        listener: (context, value) {
          // 根据值执行操作
        },
      ),
      SharedFlowListener(
        sharedFlow: context.vm<ViewModelB>().anySharedFlow,
        listener: (context, value) {
          // 根据值执行操作
        },
      ),
    ],
    child: ChildA(),
  )
  

• MultiProvider：将多个 ViewModelProvider、ChangeNotifierProvider 和/或 Provider widgets 合并为一个。

  MultiProvider(
    providers: [
      ViewModelProvider(
        create: (context) => ViewModelA(),
      ),
      ViewModelProvider(
        create: (context) => ViewModelB(),
      ),
      ChangeNotifierProvider(
        create: (context) => ChageNotifierA(),
      ),
    ],
    child: ChildA(),
  )