Flutter MVC架构插件mvcprovider的使用

Flutter MVC架构插件mvcprovider的使用

如果你来自版本1，请查看变更日志以处理V2的破坏性更改。

基于Provider包创建一个简单的MVC架构。这是Flutter创始人推荐的状态管理包。

  • 快速创建具有清晰结构的代码。
  • 模块
    • 模型
    • 视图
    • 控制器
  • 简单的生命周期管理，从控制器和/或模型开始。
    • create() // 在第一次视图渲染之前调用一次
    • update() // 每次视图渲染时调用
  • 最简单的方式注入依赖、服务或提供者。你只需创建一个继承自MVC_Notifier或MVC_Provider的类。
// 在模块中
// 你可以注入在子组件中使用的所有提供者：
final List<SingleChildWidget> providers = [
  MyThemeService().create,
  MyUserStateService().create,
];
  • 只需调用MyThemeService(context).listen或MyThemeService(context).get即可访问之前声明的依赖项。

开始使用官方Flutter示例

每个人都需要创建一个计数器模块，当然你也不例外。

步骤1

首先，定义你的非常复杂的模型 (my.counter.model.dart)：

class MyCounterModel extends MVC_Model<MyCounterCtrl> {
  int _count = 0;

  set count(int value) {
    _count = value;
    notifyListeners();
  }

  int get count => _count;
}

步骤2

然后定义一个控制器，该控制器将通过大量的数学运算来增加count属性 (my.counter.ctrl.dart)：

class MyCounterCtrl extends MVC_Controller<MyCounterModel> {
  void increment() {
    model.count++;
  }
}

现在，你有了一个神奇的方法increment，它将增加模型的count属性，并调用refresh（别名方法notifyListeners），以便刷新视图。

步骤3

但是要刷新视图，你需要一个视图。以下是视图 (my.counter.view.dart)：

class MyCounterView extends StatelessWidget with MVC_View<MyCounterModel, MyCounterCtrl> {
  [@override](/user/override)
  Widget build(BuildContext context, [Widget? child]) {
    listen(context);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Counter : ${model.count}"),
        RaisedButton(child: Text("Increment"), onPressed: ctrl.increment)
      ],
    );
  }
}

这是一个有点复杂的视图。解释一下：顶部是一个文本，下面是按钮。

如你所见，文本显示了模型的count属性，而按钮在按下时执行控制器的increment方法。

步骤4

为了让魔法发生，你需要将这三个实体连接在一起。我决定将这种融合称为模块，但如果你想的话，也可以将其称为罗伯托或其他任何名字。

以下是我们的模块 (my.counter.dart)：

class MyCounterModule extends MVC_Module<MyCounterModel, MyCounterView, MyCounterCtrl> {
  final MyCounterModel model = MyCounterModel();
  final MyCounterView view = MyCounterView();
  final MyCounterCtrl ctrl = MyCounterCtrl();
  final List<SingleChildWidget> providers = [];
}

步骤5

要在应用程序中测试你新创建的计数器功能，请调用你的小部件MyCounterModule()。例如，在你的main.dart文件中：

void main() => runApp(AmazingSample());

class AmazingSample extends StatelessWidget {
  // 这个小部件是这个神奇的软件包示例的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MVC Provider 计数器演示',
      home: MyCounterModule(),
    );
  }
}

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

1 回复

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


在Flutter中，MVC（Model-View-Controller）架构是一种组织代码的方式，有助于提升应用的可维护性和可扩展性。mvc_provider是一个用于Flutter MVC架构的插件，它简化了Model、View和Controller之间的通信。

以下是一个使用mvc_provider的简单示例，展示了如何在Flutter应用中实现MVC架构。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  mvc_provider: ^latest_version  # 请替换为最新版本号

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

2. 创建Model

Model通常包含应用的数据和业务逻辑。下面是一个简单的Model示例：

class CounterModel {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }
}

3. 创建Controller

Controller负责处理用户输入并更新Model。它还可以监听Model的变化并通知View进行更新。

import 'package:mvc_provider/mvc_provider.dart';
import 'counter_model.dart';

class CounterController extends ControllerMVC {
  CounterModel _model;

  CounterController() {
    _model = CounterModel();
  }

  void increment() {
    _model.increment();
    notifyListeners();  // 通知View更新
  }

  int getCount() {
    return _model.count;
  }
}

4. 创建View

View是用户界面的表示层。它监听Controller的状态变化并相应地更新界面。

import 'package:flutter/material.dart';
import 'package:mvc_provider/mvc_provider.dart';
import 'counter_controller.dart';

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CounterController controller = ControllerProvider.of<CounterController>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter MVC Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${controller.getCount()}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

5. 配置应用

最后，在你的主函数或MyApp类中配置MVCProvider，并将View作为根组件。

import 'package:flutter/material.dart';
import 'package:mvc_provider/mvc_provider.dart';
import 'counter_controller.dart';
import 'counter_view.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVC Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MVCProvider<CounterController>(
        create: () => CounterController(),
        child: CounterView(),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的计数器应用，使用mvc_provider实现了MVC架构。Model包含计数器的状态，Controller处理按钮点击事件并更新Model，View显示计数器的当前值并提供用户界面。

这个示例展示了mvc_provider的基本用法，但你可以根据需要扩展和自定义它以适应更复杂的应用场景。

回到顶部