Flutter如何使用最简单的状态管理库view_model

在Flutter中如何使用最简单的状态管理库view_model？我刚开始学习状态管理，觉得Provider和Bloc有点复杂。view_model看起来比较轻量，能否提供一个最简单的使用示例？具体想了解：如何定义view_model？如何将它与Widget绑定？以及在子Widget中如何访问和更新状态？最好能有个完整的代码片段说明基本用法。

2 回复

在Flutter中使用view_model状态管理库，只需以下步骤：

  1. 添加依赖：flutter pub add view_model
  2. 创建ViewModel类继承ViewModel
  3. 使用ViewModelProvider包裹组件
  4. 通过ViewModelProvider.of<T>(context)获取ViewModel实例

示例：

class MyViewModel extends ViewModel {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
}

在Widget中使用：

ViewModelProvider<MyViewModel>(
  create: (context) => MyViewModel(),
  child: MyWidget(),
)

更多关于Flutter如何使用最简单的状态管理库view_model的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用最简单的状态管理库 view_model，可以按照以下步骤操作：

1. 添加依赖

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

dependencies:
  view_model: ^1.0.0  # 使用最新版本

运行 flutter pub get 安装。

2. 创建 ViewModel

继承 ViewModel 类，管理状态：

import 'package:view_model/view_model.dart';

class CounterViewModel extends ViewModel {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知界面更新
  }
}

3. 在界面中使用

通过 ViewModelProvider 获取 ViewModel 并监听状态变化：

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

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = ViewModelProvider.of<CounterViewModel>(context);

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: ${viewModel.count}'),
            ElevatedButton(
              onPressed: viewModel.increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 注册 ViewModel

在应用顶层提供 ViewModel：

void main() {
  runApp(
    ViewModelProvider(
      viewModel: CounterViewModel(),
      child: MaterialApp(home: CounterPage()),
    ),
  );
}

特点说明：

  • 轻量简单：仅需继承 ViewModel 并调用 notifyListeners() 更新界面。
  • 局部刷新：只有依赖状态的部件会重建。
  • 适合小型应用或简单状态管理场景。

通过以上步骤即可快速实现状态管理。

回到顶部