flutter如何实现mvvm架构

大家好，最近在学习Flutter，想了解一下如何在Flutter中实现MVVM架构。目前对MVVM的概念还比较模糊，不太清楚如何将ViewModel与View解耦，以及如何管理状态和数据绑定。有没有推荐的第三方库或最佳实践？希望能通过一个简单的例子来说明具体的实现步骤，比如如何处理网络请求和UI更新。谢谢！

2 回复

Flutter中实现MVVM架构：

  1. 使用Provider或GetX等状态管理库
  2. Model：数据模型
  3. View：UI组件
  4. ViewModel：业务逻辑，通过ChangeNotifier或Rx管理状态
  5. View监听ViewModel状态变化并更新

示例：Provider + ChangeNotifier实现数据绑定，View通过Consumer监听状态变化。

更多关于flutter如何实现mvvm架构的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现 MVVM 架构，可以通过以下步骤实现，结合数据绑定、状态管理和业务逻辑分离：

1. MVVM 结构概述

  • Model：数据层，负责数据获取和处理（如 API 调用、数据库操作）。
  • View：UI 层，展示数据并监听用户交互（Flutter Widget）。
  • ViewModel：连接 Model 和 View，处理业务逻辑，提供数据流供 View 绑定。

2. 实现步骤

Model 层

定义数据模型和数据处理逻辑：

class User {
  final String name;
  final int age;
  User(this.name, this.age);
}

class UserModel {
  Future<User> fetchUser() async {
    // 模拟 API 调用
    await Future.delayed(Duration(seconds: 1));
    return User("Alice", 25);
  }
}

ViewModel 层

使用 ChangeNotifier（或 Provider、GetX 等）管理状态，暴露数据和方法：

import 'package:flutter/foundation.dart';

class UserViewModel with ChangeNotifier {
  final UserModel _model = UserModel();
  User? _user;
  bool _loading = false;

  User? get user => _user;
  bool get loading => _loading;

  Future<void> loadUser() async {
    _loading = true;
    notifyListeners(); // 通知 UI 更新

    _user = await _model.fetchUser();
    _loading = false;
    notifyListeners(); // 数据更新后再次通知
  }
}

View 层

通过 ChangeNotifierProvider（需 provider 包）绑定 ViewModel，监听数据变化：

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

class UserScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => UserViewModel(),
      child: Scaffold(
        appBar: AppBar(title: Text('MVVM Example')),
        body: Consumer<UserViewModel>(
          builder: (context, viewModel, child) {
            if (viewModel.loading) {
              return Center(child: CircularProgressIndicator());
            }
            return Center(
              child: Text(
                viewModel.user?.name ?? 'No Data',
                style: TextStyle(fontSize: 20),
              ),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read<UserViewModel>().loadUser(),
          child: Icon(Icons.refresh),
        ),
      ),
    );
  }
}

3. 依赖包

在 pubspec.yaml 中添加：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0  # 状态管理

4. 优势

  • 解耦：View 仅负责 UI，逻辑集中在 ViewModel。
  • 可测试性：可独立测试 ViewModel 和 Model。
  • 响应式：数据变化自动更新 UI。

通过以上方式，即可在 Flutter 中清晰实现 MVVM 架构。

回到顶部