Flutter视图模型宏定义插件view_model_macro的使用

Flutter视图模型宏定义插件view_model_macro的使用

使用Dart宏支持ViewModel工具。

✨ 特性

• StateNotifier 带有私有状态和发射器以及公共流。
• ActionNotifier 可选通知器带有私有发射器和公共流。
• Dispose 自动处理从ViewModel声明的所有通知器。

🧑‍💻 示例

import 'package:view_model_macro/view_model_macro.dart';

@ViewModel()
class Counter {
  final StateNotifier<int> _count = StateNotifier(0);

  void add() => _emitCount(_countValue + 1);
  void subtract() => _emitCount(_countValue - 1);
}

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

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

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  // 声明ViewModel
  final counter = Counter();

  [@override](/user/override)
  void dispose() {
    // 需要时进行清理
    counter.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () => counter.add(),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 从流中收集数据并基于其数据构建小部件
              counter.countStream.collectAsWidget(
                (value) {
                  return Text('Count: $value');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

🚀 快速开始

1. 在pubspec.yaml中添加package:view_model_macro

   dependencies:
     view_model_macro: any
   

2. 在analysis_options.yaml中启用实验性宏

   analyzer:
     enable-experiment:
       - macros
   

3. 使用@ViewModel注解（见上面示例）。

4. 运行项目

   flutter run --enable-experiment=macros
   

需要 Dart SDK >= 3.5.0

示例代码

import 'package:example/calculator.dart';
import 'package:flutter/material.dart';
import 'package:view_model_macro/view_model_macro.dart';

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

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

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final counter = Calculator();

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

  void _onShowSnackBar(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Show SnackBar from ActionNotifier')),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () => counter.add(),
        ),
        body: Builder(builder: (context) {
          return counter.showSnackBarStream.collectAsListener(
            onData: (_) => _onShowSnackBar(context),
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  counter.countStream.collectAsWidget(
                    (value) {
                      return Text('Count: $value');
                    },
                  ),
                ],
              ),
            ),
          );
        }),
      ),
    );
  }
}