Flutter MVVM架构与状态管理插件mvvm

Flutter MVVM架构与状态管理插件mvvm_bloc的使用

在Flutter开发中，MVVM（Model-View-ViewModel）架构结合BLoC（Business Logic Component）模式是一种非常流行的状态管理模式。本文将介绍如何使用mvvm_bloc插件来实现MVVM架构，并通过一个简单的计数器示例展示其用法。

获取开始

首先，确保你已经在项目中添加了mvvm_bloc依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  mvvm_bloc: ^1.0.0

然后运行flutter pub get以安装依赖。

ViewModel

ViewModel负责处理业务逻辑并维护UI的状态。以下是MyPageViewModel的实现：

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

// 定义 ViewModel
class MyPageViewModel extends ViewModel {
  [@override](/user/override)
  String get name => 'my_page'; // ViewModel 的唯一标识符

  final LifeCycleOwner? parent;

  // 构造函数
  MyPageViewModel({
    Key? key,
    required Widget Function(ViewModel) builder,
    this.parent,
  }) : super(key: key, builder: builder);

  // 工厂方法用于创建 ViewModel 实例
  factory MyPageViewModel.build({LifeCycleOwner? parent}) {
    return MyPageViewModel(
      parent: parent,
      builder: (vm) => MyPageView(vm as MyPageViewModel),
    );
  }

  // 使用 LiveData 来管理状态
  late final LiveData<int> $counter = LiveData(0).owner(this);

  // 增加计数
  void increment() {
    $counter.value++;
  }

  // 减少计数
  void decrement() {
    $counter.value--;
  }
}

View

View负责渲染UI并响应用户交互。以下是MyPageView的实现：

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

// 定义 View
class MyPageView extends View<MyPageViewModel> {
  const MyPageView(MyPageViewModel logic, {Key? key}) : super(logic, key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 显示当前计数值
        Text(
          'You have pushed the button this many times:',
        ),
        // 监听 LiveData 并更新 UI
        $watch(vm.$counter, builder: (_, value) {
          return Text(
            '$value',
          );
        }),

        // 增加按钮
        ElevatedButton(
          child: Text('+'),
          onPressed: () => vm.increment(),
        ),

        // 减少按钮
        ElevatedButton(
          child: Text('-'),
          onPressed: () => vm.decrement(),
        ),
      ],
    );
  }
}

主应用

最后，在主应用中初始化MyPageViewModel并运行MyPageView：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => MyPageViewModel.build(), // 创建 ViewModel
        child: MyPageView(MyPageViewModel()), // 渲染 View
      ),
    );
  }
}

更多关于Flutter MVVM架构与状态管理插件mvvm_bloc的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter MVVM架构与状态管理插件mvvm_bloc的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，MVVM（Model-View-ViewModel）是一种常见的架构模式，用于分离UI逻辑和业务逻辑。mvvm_bloc 是一个基于 bloc 的状态管理插件，它结合了MVVM架构和BLoC（Business Logic Component）模式，帮助开发者更好地管理应用的状态。

MVVM架构简介

Model: 负责数据的获取和存储，通常与数据库、网络请求等交互。
View: 负责UI的展示，通常是Flutter中的Widget。
ViewModel: 负责处理业务逻辑，并将数据传递给View进行展示。ViewModel通常不直接与View交互，而是通过状态管理工具（如mvvm_bloc）来通知View更新。

`mvvm_bloc` 插件简介

mvvm_bloc 是一个基于 bloc 的状态管理插件，它结合了MVVM架构和BLoC模式，提供了一种简洁的方式来管理应用的状态。它通过 ViewModel 和 Bloc 的结合，使得业务逻辑和UI逻辑能够更好地分离。

使用 `mvvm_bloc` 的步骤

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

dependencies:
  flutter:
    sdk: flutter
  mvvm_bloc: ^1.0.0  # 请使用最新版本

创建Model: Model负责数据的获取和存储。例如，一个简单的用户模型：
```
class User {
  final String name;
  final int age;

  User(this.name, this.age);
}
```

创建ViewModel: ViewModel负责处理业务逻辑，并通过 Bloc 管理状态。例如，一个简单的用户ViewModel：

import 'package:mvvm_bloc/mvvm_bloc.dart';

class UserViewModel extends ViewModel {
  final _userBloc = Bloc<User>();

  Stream<User> get userStream => _userBloc.stream;

  void fetchUser() {
    // 模拟网络请求
    Future.delayed(Duration(seconds: 2), () {
      _userBloc.add(User('John Doe', 30));
    });
  }

  @override
  void dispose() {
    _userBloc.close();
    super.dispose();
  }
}

创建View: View负责UI的展示，并通过 ViewModel 获取数据。例如，一个简单的用户信息展示页面：

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

class UserView extends StatelessWidget {
  final UserViewModel viewModel = UserViewModel();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Info'),
      ),
      body: Center(
        child: StreamBuilder<User>(
          stream: viewModel.userStream,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasData) {
              final user = snapshot.data!;
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Name: ${user.name}'),
                  Text('Age: ${user.age}'),
                ],
              );
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('No data');
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          viewModel.fetchUser();
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

运行应用: 在 main.dart 中运行应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MVVM Bloc Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: UserView(),
    );
  }
}

Flutter MVVM架构与状态管理插件mvvm_bloc的使用