最简单的状态管理库 view_model

19 天前
 lumyx

被 riverpod 繁琐和侵入式的使用方式困扰许久后,自己重新造了个轮子。 https://pub.dev/packages/view_model

优点是使用简单, 非常纯粹, 只是 view_model 没有其他花里花哨的概念。

import 'package:view_model/view_model.dart';
import 'package:flutter/foundation.dart'; // For debugPrint

class MySimpleViewModel extends ViewModel {
  String _message = "Initial Message";
  int _counter = 0;

  String get message => _message;

  int get counter => _counter;

  void updateMessage(String newMessage) {
    _message = newMessage;
    notifyListeners(); // 通知监听者数据已更新
  }

  void incrementCounter() {
    _counter++;
    notifyListeners(); // 通知监听者数据已更新
  }

  @override
  void dispose() {
    // 在此清理资源,例如关闭 StreamControllers 等
    debugPrint('MySimpleViewModel disposed');
    super.dispose();
  }
}



ViewModelFactory 负责实例化 ViewModel 。每个 ViewModel 类型通常 需要一个对应的 Factory 。

import 'package:view_model/view_model.dart';
// 假设 MySimpleViewModel 已如上定义

class MySimpleViewModelFactory with ViewModelFactory<MySimpleViewModel> {
  @override
  MySimpleViewModel build() {
    // 返回一个新的 MySimpleViewModel 实例
    return MySimpleViewModel();
  }
}

通过 watchViewModel 直接在 State 中使用.

class _MyPageState extends State<MyPage>
    with ViewModelStateMixin<MyPage> {
  // 1. 混入 Mixin

  late final MySimpleViewModel simpleVM;

  @override
  void initState() {
    super.initState();
    // 2. 在 initState 中获取 ViewModel
    // 当 MyPage 第一次构建时,MySimpleViewModelFactory 的 build() 方法会被调用来创建实例。
    // 当 MyPage 被销毁时,如果此 viewModel 没有其他监听者,它也会被销毁。
    simpleVM =
        watchViewModel<MySimpleViewModel>(factory: MySimpleViewModelFactory());
  }
  
  
    @override
  Widget build(BuildContext context) {
  	// 直接使用. simpleVM 数据更新后,会自动 setState
    Tetx(simpleVM.xxx);
  }

缺点是没有颗粒度更新,但我认为这其实不算缺点,这不是状态管理该做的事,但 riverpod bloc signal 似乎都对这个很在意,Widget 本身的 diff 已经足够高效, 就算每秒 setState 对帧率的影响也微乎其微,因为底层的 Render 没变,Widget 只是配置而已。 如果你真的需要频繁更新某个 局部 Widget ,那你应该使用 ValueNotitifierBuilder : https://github.com/lwj1994/flutter_view_model/issues/13

完整的文档: https://github.com/lwj1994/flutter_view_model/blob/main/packages/view_model/README_ZH.md

752 次点击
所在节点    Flutter
1 条回复
Ditto8597
18 天前
很好,用用

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1164675

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX