flutter中MVC和MVVM的区别

Question

我不明白mvc和mvvm之间的区别！

有人可以帮我解释一下吗？

在MVC中：

型号

class UserModel {
  late int id;
  late String name;
  late String email;

  UserModel({required this.id, required this.name, required this.email});

  UserModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    email = json['email'];
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
}

查看

return Scaffold(
      body: Column(
        children: [
          FutureBuilder(
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  shrinkWrap: true,
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) => ListTile(
                    title: Text(snapshot.data![index].name),
                    trailing: IconButton(
                      icon: const Icon(Icons.delete),
                      onPressed: () {
                         UsersController.delete(snapshot.data![index].id) <----
                       },
                    ),
                  ),
                );
              } else {
                return const CircularProgressIndicator();
              }
            },
            future: UsersController.getAll(), <----
          ),
        ],
      ),
    );

控制器

class UsersController {
  Future<List<UserModel>> getAll() async {
     .....................
     return users;
  }
 Future<void> delete(id) async {
     .....................
  }
}

一切都按预期进行现在，我尝试使用*MVVM架构

我使用相同的模型和视图，我只是将控制器更改为ViewModel

视图模型

class ViewModel {
  Future<List<UserModel>> getAll() async {
     .....................
     return users;
  }
 Future<void> delete(id) async {
     .....................
  }
}

什么都没有改变，只有类名！

我知道，错了！但我必须做什么？在mvvm中，模型视图的作用是向视图提供数据，而这正是我正在做的！相同的控制器或模型视图提供视图数据！

有人可以解释一下吗？

Answer 1

ViewModel 中的要点是定制对需要渲染的视图的响应。当您有一个简单的 CRUD 应用程序（其中 ViewModel 和 Model 是 1-1 并直接在视图中表示）时，很难看到这一点。

为了能够看到这里的差异，您需要将多个模型输入到 ViewModel 中，或者您需要通过省略部分来以某种方式约束模型。在较大的应用程序中，您可能有许多 ViewModel，其中包含许多 Model 的一部分。

扩展您的示例，如果您有第二个名为“帖子”的模型，它与用户关联。您需要一个视图，该视图不仅指示用户信息，还指示他们有多少帖子，然后您将创建一个 ViewModel，将 NumberOfPosts 添加到 ViewModel，然后将其返回到视图层。您的模型永远不会包含该值，它只是从您的模型的组合中派生出来。

Answer 2

MVC（模型-视图-控制器）和 MVVM（模型-视图-视图模型）的概念并不像其他框架中那样严格执行架构模式。然而，开发人员经常使用类似的概念来构建代码，以实现更好的组织、可维护性和关注点分离。

MVC（模型-视图-控制器）：
- Model：代表应用程序的数据和业务逻辑。
- View：代表应用程序的UI（用户界面）。
- Controller：充当模型和视图之间的中介。它处理用户输入并相应地更新模型和/或视图。
在 Flutter 中，您可能会看到类似的方法，其中有表示数据的类或对象（模型）、表示 UI 的小部件（视图），以及可能管理业务逻辑和交互的单独的类或控制器（控制器）。
MVVM（模型-视图-视图模型）：
- Model：代表应用程序的数据和业务逻辑。
- View：代表应用程序的UI（用户界面）。
- ViewModel：充当模型和视图之间的中介。它准备模型中的数据以在视图中呈现并处理任何呈现逻辑。 View 与 ViewModel 交互以更新 UI。
在 Flutter 中，可以使用类似的概念来实现 MVVM。您可能有表示数据的类（模型）、表示 UI 的小部件（视图）以及为视图准备数据并处理视图和底层数据之间的交互的单独的类（ViewModel）。

在 Flutter 中，人们通常倾向于采用更具反应性的方法，即 UI 会根据数据的变化进行更新。因此，您可能会看到与 MVVM 更密切相关的模式，其中数据通过响应式框架（如 Flutter 的内置流或 Provider 或 Riverpod 等包）进行流式传输或提供。这允许以更具声明性和反应性的方式构建 UI。

flutter中MVC和MVVM的区别

问题描述投票：0回答：2

2个回答

最新问题

flutter中MVC和MVVM的区别

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2