Flutter MVP架构实现插件stark

本文将介绍如何在Flutter项目中使用stark_mvp插件来实现MVP（Model-View-Presenter）架构。通过此插件，可以简化MVP模式的实现，并提高代码的可维护性和复用性。

Stark MVP

stark_mvp 是一个用于在Flutter项目中实现MVP架构的工具库。它基于 Stark 库，提供了许多实用的功能来帮助开发者快速构建基于MVP模式的应用程序。

安装

首先，在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  stark_mvp: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

使用示例

1. 创建Presenter类

首先，我们需要创建一个继承自 Presenter 的类，并定义业务逻辑。

import 'package:stark_mvp/stark_mvp.dart';

// 定义一个简单的Presenter类
class CounterPresenter extends Presenter {
  // 定义一个方法来更新计数器
  void incrementCounter() {
    // 模拟业务逻辑
    final currentState = getViewState();
    if (currentState is CounterViewState) {
      final newCount = currentState.count + 1;
      setViewState(CounterViewState(count: newCount));
    }
  }

  // 定义一个方法来获取当前状态
  CounterViewState? getCurrentState() {
    return getViewState();
  }
}

// 定义一个状态类
class CounterViewState {
  final int count;

  CounterViewState({required this.count});
}

2. 创建View类

接下来，我们创建一个继承自 StatefulWidget 的View类，并将其与Presenter绑定。

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

class CounterView extends StatefulWidget {
  [@override](/user/override)
  _CounterViewState createState() => _CounterViewState();
}

class _CounterViewState extends State<CounterView> {
  late CounterPresenter _presenter;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化Presenter
    _presenter = CounterPresenter();
    // 绑定View到Presenter
    _presenter.setView(this);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MVP Example'),
      ),
      body: Center(
        child: Consumer<CounterViewState>(
          builder: (context, state, child) {
            return Text(
              'Count: ${state?.count ?? 0}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 调用Presenter的方法
          _presenter.incrementCounter();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

3. 主应用入口

最后，在主应用中使用 CounterView。

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterView(),
    );
  }
}

yuanlaile 1楼•13 天前

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

stark_mvp 是一个用于 Flutter 的 MVP（Model-View-Presenter）架构插件，它帮助开发者更容易地实现 MVP 模式。MVP 是一种设计模式，它将应用程序分为三个主要部分：Model、View 和 Presenter。这种分离有助于提高代码的可维护性和可测试性。

安装 `stark_mvp`

首先，你需要在 pubspec.yaml 文件中添加 stark_mvp 依赖：

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

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

使用 `stark_mvp`

1. 创建 Model

Model 负责处理数据和业务逻辑。你可以创建一个类来表示 Model。

class UserModel {
  String name;
  int age;

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

2. 创建 View

View 负责 UI 的展示。你可以使用 StatefulWidget 或 StatelessWidget 来实现 View。

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

class UserView extends StatefulWidget {
  [@override](/user/override)
  _UserViewState createState() => _UserViewState();
}

class _UserViewState extends ViewState<UserView, UserPresenter> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Name: ${presenter.userName}'),
            Text('Age: ${presenter.userAge}'),
          ],
        ),
      ),
    );
  }
}

3. 创建 Presenter

Presenter 是 View 和 Model 之间的桥梁。它负责处理用户交互并更新 View。

import 'package:stark_mvp/stark_mvp.dart';

class UserPresenter extends Presenter<UserView> {
  UserModel _userModel = UserModel(name: 'John Doe', age: 30);

  String get userName => _userModel.name;
  int get userAge => _userModel.age;

  void updateUser(String name, int age) {
    _userModel.name = name;
    _userModel.age = age;
    view.update(); // 通知 View 更新
  }
}

4. 绑定 View 和 Presenter

在 ViewState 中，你需要绑定 View 和 Presenter。

class _UserViewState extends ViewState<UserView, UserPresenter> {
  [@override](/user/override)
  UserPresenter createPresenter() => UserPresenter();
}

5. 使用 View

最后，你可以在应用程序中使用 UserView。

void main() {
  runApp(MaterialApp(
    home: UserView(),
  ));
}

完整示例

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

class UserModel {
  String name;
  int age;

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

class UserView extends StatefulWidget {
  [@override](/user/override)
  _UserViewState createState() => _UserViewState();
}

class _UserViewState extends ViewState<UserView, UserPresenter> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Name: ${presenter.userName}'),
            Text('Age: ${presenter.userAge}'),
            ElevatedButton(
              onPressed: () {
                presenter.updateUser('Jane Doe', 25);
              },
              child: Text('Update User'),
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  UserPresenter createPresenter() => UserPresenter();
}

class UserPresenter extends Presenter<UserView> {
  UserModel _userModel = UserModel(name: 'John Doe', age: 30);

  String get userName => _userModel.name;
  int get userAge => _userModel.age;

  void updateUser(String name, int age) {
    _userModel.name = name;
    _userModel.age = age;
    view.update(); // 通知 View 更新
  }
}

void main() {
  runApp(MaterialApp(
    home: UserView(),
  ));
}

Flutter MVP架构实现插件stark_mvp的使用