Flutter MVC架构插件packagist_mvc的使用

MVC基础框架

示例代码地址

• Example

Getting Started

Model Class

Model 是 MVC 模式中的数据层，用于存储和管理应用的数据。

class MvcModel extends BaseModel {
}

Controller Class

Controller 是 MVC 模式的控制层，负责处理业务逻辑和状态管理。

class MvcController extends BaseController<MvcModel> {
  [@override](/user/override)
  MvcModel model = MvcModel();

  // 扩展功能
  extension Data on MvcController {}

  extension Action on MvcController {}

  extension Network on MvcController {}
}

View Class

View 是 MVC 模式的视图层，负责展示 UI 并响应用户交互。

class MvcPage extends BasePage<MvcController, MvcModel> {
  const MvcPage({super.key});

  [@override](/user/override)
  MvcController putController() => Get.put(MvcController());

  [@override](/user/override)
  String? get tag => null;

  [@override](/user/override)
  Color get backgroundColor => Colors.white;

  [@override](/user/override)
  Widget? get appBar => AppBar(
        title: const Text('Title'),
      );

  [@override](/user/override)
  Widget get body {
    return Center();
  }
}

TabController 初始化

View Class

TabController 用于管理多标签页的状态。

class MvcPage extends BasePage<MvcController, MvcModel> {

  [@override](/user/override)
  Widget get body {
    return Column(children: [
      TabBar(
        controller: model.tabController,
        onTap: (int index) {
          model.tabController.animateTo(index);
        },
        tabs: const [
          Tab(text: 'Tab1'),
          Tab(text: 'Tab2'),
        ],
        labelColor: Colors.black,
      ),
      Expanded(
        child: TabBarView(
          controller: model.tabController,
          children: const [
            MvcTab1Page(),
            MvcTab2Page(),
          ],
        ),
      ),
    ]);
  }

  [@override](/user/override)
  State<BasePage> createState() => TabControllerState<MvcPage, MvcController>();

  [@override](/user/override)
  void initTabController(TickerProvider vsync) {
    model.tabController = TabController(length: 2, vsync: vsync);
  }
}

KeepAlive

通过 KeepAlive 保持页面状态。

View Class

class MvcPage extends BasePage<MvcController, MvcModel> {

  [@override](/user/override)
  State<BasePage> createState() =>
      KeepAliveState<MvcTab2Page, MvcTab2Controller>();
}

View Status Switch

Controller Class

实现加载状态的动态切换。

class MvcController extends BaseStatusController<MvcModel> {
  [@override](/user/override)
  MvcModel model = MvcModel();

  [@override](/user/override)
  void onReady() {
    super.onReady();
    toContent(); // 初始状态为内容显示
  }

  [@override](/user/override)
  void onRetry() {
    onStatusSwitch();
  }
}

extension Action on MvcController {
  void onStatusSwitch() {
    model.count++; // 计数器增加
    if (model.count % 5 == 0) {
      toLoading(); // 进入加载状态
      Future.delayed(const Duration(seconds: 2), () => toContent()); // 延迟后恢复内容状态
    } else if (model.count % 2 == 0) {
      toLoading();
      Future.delayed(const Duration(seconds: 2), () => toEmpty()); // 延迟后进入空状态
    } else {
      toLoading();
      Future.delayed(const Duration(seconds: 2), () => toError()); // 延迟后进入错误状态
    }
  }
}

View Class

实现不同状态的 UI 展示。

class MvcPage extends BaseStatusPage<MvcController, MvcModel> {
  const MvcPage({super.key});

  [@override](/user/override)
  MvcController putController() => Get.put(MvcController());

  [@override](/user/override)
  Widget get loading => super.loading; // 默认加载状态

  [@override](/user/override)
  Widget get error => GestureDetector(
        onTap: controller.onRetry, // 点击重试
        child: super.error,
      );

  [@override](/user/override)
  Widget get empty => GestureDetector(
        onTap: controller.onRetry, // 点击重试
        child: super.empty,
      );

  [@override](/user/override)
  Widget get body {
    return Center(
      child: TextButton(
        onPressed: controller.onStatusSwitch, // 点击切换状态
        child: const Text('MVC加载状态切换测试，\n点击进入加载状态'),
      ),
    );
  }
}

完整示例 Demo

以下是一个完整的示例代码，展示如何使用 packagist_mvc 插件构建一个带有状态切换的 MVC 架构页面。

// main.dart
import 'package:flutter/material.dart';
import 'package:packagist_mvc/base/lifecycle_observer.dart';

import 'mvc_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [lifecycleObserver],
      title: 'Flutter MVC Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MvcPage(),
    );
  }
}