Flutter MVVM架构插件mvvm的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter MVVM架构插件mvvm的使用

简介

mvvm 是一个用于Flutter应用的MVVM (Model-View-ViewModel)架构实现。它通过基于属性的数据绑定，在ViewModel和View之间建立关联，并利用ViewModel驱动视图的变化。

示例代码

以下是一个简单的示例，展示了如何使用 mvvm 插件来创建一个计数器应用。

ViewModel

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

/// ViewModel
class MyHomePageViewModel extends ViewModel {
  final timer$ = BindableProperty.$tick(
      duration: const Duration(milliseconds: 10), autostart: true, initial: 0);

  @override
  init() {
    registerProperty(#counter, BindableProperty.$value(initial: 0));
  }

  void incrementCounter() {
    updateValue<int>(#counter, (value) => value + 1);
  }
}

View

class MyHomePage extends View<MyHomePageViewModel> {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  MyHomePageViewModel createViewModel() => MyHomePageViewModel();

  pad(int value) => '$value'.padLeft(2, '0');

  @override
  Widget build(BuildContext context, MyHomePageViewModel model) {    
    return Scaffold(
        appBar: AppBar(title: Text(title)),
        body: Center(
            child:
                Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          $watch<int>(model.timer$,
              builder: (context, value, child) =>
                  Text('${pad(value ~/ 100)}.${pad(value % 100)}')),
          const Text('You have pushed the button this many times:'),
          model.$watchFor<int>(#counter,
              builder: (context, value, child) =>
                  Text('$value', style: Theme.of(context).textTheme.headline4))
        ])),
        floatingActionButton: FloatingActionButton(
            onPressed: model.incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add)));
  }
}

运行应用

void main() => runApp(MaterialApp(
      title: 'Flutter MVVM Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter MVVM Demo Home Page'),
    ));

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

Harmonyos Next教程
1 回复

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


在Flutter中，MVVM（Model-View-ViewModel）架构是一种常用的设计模式，它有助于分离关注点，使代码更加模块化和易于维护。尽管Flutter本身并没有内置的MVVM框架，但我们可以使用一些第三方库来简化MVVM架构的实现。其中，flutter_mvvm 是一个流行的插件，不过需要注意的是，由于Flutter社区发展迅速，具体的库名称和实现可能会有所变化。

以下是一个使用Flutter的MVVM架构的示例代码，这里假设我们有一个简单的用户信息展示应用。为了简单起见，我不会直接使用一个名为flutter_mvvm的特定库（因为该名称可能不指向一个实际存在的、专门用于MVVM架构的Flutter插件），而是展示如何使用基本的Flutter组件和状态管理（如Provider或GetX）来实现MVVM架构的核心思想。

1. Model层

首先，我们定义一个用户模型UserModel。

class UserModel {
  final String name;
  final int age;

  UserModel({required this.name, required this.age});
}

2. ViewModel层

接下来，我们创建一个UserViewModel，它负责处理业务逻辑和数据绑定。

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'user_model.dart';

final userViewModelProvider = StateNotifierProvider<UserViewModel, UserModel?>((ref) {
  return UserViewModel();
});

class UserViewModel extends StateNotifier<UserModel?> {
  UserViewModel() : super(null) {
    // 模拟从API获取数据
    Future.delayed(Duration(seconds: 2), () {
      final user = UserModel(name: 'John Doe', age: 30);
      state = user;
    });
  }

  void fetchUser() async {
    // 实际上，这里应该调用API来获取数据
    // 这里只是模拟
    final user = UserModel(name: 'Jane Doe', age: 25);
    state = user;
  }
}

在这个例子中，我使用了flutter_riverpod作为状态管理库，但你也可以选择Provider、GetX或其他状态管理解决方案。

3. View层

最后，我们在View层（Widget层）中使用UserViewModel来展示用户信息。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'user_model.dart';
import 'user_viewmodel.dart';

void main() {
  runApp(
    ProviderContainer(
      overrides: [
        userViewModelProvider.overrideWithValue(UserViewModel()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserProfileScreen(),
    );
  }
}

class UserProfileScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userViewModel = ref.watch(userViewModelProvider);
    final user = userViewModel ?? UserModel(name: 'Loading...', age: 0);

    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Name: ${user.name}'),
            Text('Age: ${user.age}'),
            ElevatedButton(
              onPressed: () {
                ref.read(userViewModelProvider.notifier).fetchUser();
              },
              child: Text('Fetch New User'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，UserProfileScreen是一个ConsumerWidget，它使用ref.watch来监听UserViewModel的状态变化，并在界面上展示用户信息。同时，提供了一个按钮来模拟获取新用户数据。

总结

虽然没有一个名为flutter_mvvm的特定库，但通过使用状态管理库（如flutter_riverpod、Provider、GetX等）和遵循MVVM架构的原则，我们可以在Flutter中实现类似的架构模式。上面的代码示例展示了如何使用这些工具来创建一个简单的MVVM架构的Flutter应用。

回到顶部