Flutter MVP 设计模式解析

2023-09-07 12:54:41

在 Android 开发中有很多设计模式,从 MVC 到 MVP MVVM 等,而在 Flutter 中也可是使用 MVP 模式进行开发,在这篇文章中我们来看一下在 Flutter 中如何使用 MVP 模式开发应用. MVP 模式主要包含三个部分 UI 层包含所有我们需要的 Widget 和代码,而 P 层包含所有处理逻辑及对 UI 的操作,而 M 层包含数据交互获取操作等. 通过这样的方式将不同层级的工作划分清楚,让我们在进行代码维护和开发时更为清晰和简单. 下面将通过一个简单的例子展示如何在 Flutter 中使用 MVP 模式开发一个应用.

创建项目

首先,我们需要创建一个新的 Flutter 项目. 打开你的命令行工具,输入以下命令:

flutter create mvp_app

安装必要的依赖项

接下来,我们需要安装一些必要的依赖项. 打开你的项目的 pubspec.yaml 文件,添加以下依赖项:

dependencies:
  mvp_flutter: ^1.0.0

然后,在终端运行以下命令来安装这些依赖项:

flutter pub get

创建一个 MVP 架构

现在,我们可以创建一个 MVP 架构. 在你的项目中创建一个新的文件夹,名为 "mvp". 然后,在这个文件夹中创建三个文件: "view.dart", "presenter.dart" 和 "model.dart".

实现视图

在 "view.dart" 文件中,我们将实现视图. 视图负责显示 UI 并处理用户交互. 我们将创建一个简单的计数器应用程序,所以我们的视图将包含一个文本小部件来显示计数,以及一个按钮来增加计数.

import 'package:flutter/material.dart';

class CounterView extends StatelessWidget {
  final int count;
  final Function() onIncrement;

  const CounterView({Key? key, required this.count, required this.onIncrement}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: onIncrement,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

实现呈现器

在 "presenter.dart" 文件中,我们将实现呈现器. 呈现器负责处理逻辑并与视图和模型进行交互. 在我们的例子中,呈现器将负责增加计数.

import 'package:mvp_flutter/mvp_flutter.dart';

class CounterPresenter extends Presenter {
  final CounterModel model;
  final CounterView view;

  CounterPresenter(this.model, this.view) {
    view.onIncrement = () {
      model.incrementCount();
      view.setState(() {});
    };
  }
}

实现模型

在 "model.dart" 文件中,我们将实现模型. 模型负责存储数据并处理与数据的交互. 在我们的例子中,模型将负责存储计数.

class CounterModel {
  int count = 0;

  void incrementCount() {
    count++;
  }
}

将 MVP 架构组合在一起

现在,我们需要将 MVP 架构组合在一起. 我们将创建一个新的类,名为 "MyApp",并将它作为我们的应用程序的入口点. 在 "MyApp" 类中,我们将创建一个 "CounterPresenter" 对象和一个 "CounterView" 对象,并将它们链接在一起.

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

import 'mvp/counter_model.dart';
import 'mvp/counter_presenter.dart';
import 'mvp/counter_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final model = CounterModel();
    final presenter = CounterPresenter(model, CounterView(count: model.count, onIncrement: () {}));

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: presenter.view,
        ),
      ),
    );
  }
}