Flutter MVC架构插件get_mvc的使用

Flutter MVC架构插件get_mvc的使用

GET_MVC (GETM)

GET_MVC 是一个类似于 Laravel Artisan 的命令行工具，用于在使用 GetX 的 Flutter 项目中生成 MVC 文件。这是一个基于 Dart 的命令行工具，可以帮助创建和组织 Flutter 应用程序，通过生成模型、视图、控制器、绑定和服务来实现。它遵循 MVC 模式和 GetX 标准，自动生成样板代码。

特性

  • 生成 MVC 组件: 可以轻松通过一条命令创建模型、视图、控制器、绑定和服务。
  • 完整的文件结构: 自动将应用程序文件组织到目录中，以便高效管理。
  • 占位符数据生成: 为每种文件类型包含占位内容，帮助快速启动开发过程。

安装

要使用 get_mvc，您需要安装 Dart。可以通过以下方式安装：

安装完成后，可以全局安装 get_mvc 使用以下命令：

flutter pub global activate get_mvc

或者从 GitHub 克隆仓库并运行以下命令：

git clone <repository-url>
cd <repository-directory>
dart run

确保将 Dart SDK 的 bin 目录添加到系统的 PATH 中，以便访问已安装的二进制文件。

项目结构

project/
    ├── lib/
    │   ├── app/
    │   │   ├── models/
    │   │   │   └── home/
    │   │   │   │   └── home_model.dart
    │   │   │   └── .....
    │   │   ├── views/
    │   │   │   └── home/
    │   │   │   │   └── home_view.dart
    │   │   │   └── ....
    │   │   ├── controllers/
    │   │   │   └── home/
    │   │   │   │   └── home_controller.dart
    │   │   │   └── ...
    │   │   ├── bindings/
    │   │   │   └── home/
    │   │   │   │   └── home_binding.dart
    │   │   │   └── ...
    │   │   ├── services/
    │   │   │   └── home/
    │   │   │   │   └── home_service.dart
    │   │   │   └── ...
    │   │   └── main.dart
    └── README.md

使用方法

命令概述

创建组件

getm create type=name

参数说明：

  • <type>: 要创建的文件类型（model、view、controller、binding、service 或 all）
  • <name>: 组件的基本名称

初始化新的 Flutter 项目

getm new --project=my_app --org=com.example

此命令会创建一个具有指定名称和组织的新 Flutter 项目。

显示帮助信息

getm help

示例

1. 生成模型

getm create model=user

这将在以下路径创建一个带有占位内容的模型文件：

lib/app/models/user/user_model.dart

2. 生成所有组件

getm create all=home

这会在各自的目录中生成以下文件：

  • lib/app/models/home/home_model.dart
  • lib/app/views/home/home_view.dart
  • lib/app/controllers/home/home_controller.dart
  • lib/app/bindings/home/home_binding.dart
  • lib/app/services/home/home_service.dart

示例代码

1. 生成模型

// lib/app/models/user/user_model.dart
class UserModel {
  final String name;
  final int age;

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

2. 生成视图

// lib/app/views/home/home_view.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home View'),
      ),
      body: Center(
        child: Text('Welcome to Home View!'),
      ),
    );
  }
}

3. 生成控制器

// lib/app/controllers/home/home_controller.dart
import 'package:get/get.dart';

class HomeController extends GetxController {
  var count = 0.obs;

  void increment() => count++;
}

4. 生成绑定

// lib/app/bindings/home/home_binding.dart
import 'package:get/get.dart';
import 'home_controller.dart';

class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => HomeController());
  }
}

5. 生成服务

// lib/app/services/home/home_service.dart
class HomeService {
  String fetchData() {
    return "Data from Home Service";
  }
}

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

1 回复

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


get_mvc 是一个基于 GetX 的 Flutter 插件，它提供了一种简单的方式来组织你的 Flutter 应用程序，遵循 MVC（Model-View-Controller）架构模式。GetX 是一个轻量级且功能强大的状态管理库，get_mvc 则在此基础上进一步简化了 MVC 架构的实现。

安装 get_mvc

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

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

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

使用 get_mvc

get_mvc 提供了一个 MVCController 类，你可以继承它来创建你的控制器。控制器负责处理业务逻辑，并与模型和视图进行交互。

1. 创建模型（Model）

模型通常是一个简单的数据类，用于存储应用程序的数据。

class User {
  String name;
  int age;

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

2. 创建控制器（Controller）

控制器继承自 MVCController，并负责处理业务逻辑。

import 'package:get_mvc/get_mvc.dart';

class UserController extends MVCController {
  var user = User(name: 'John', age: 25).obs;

  void updateUser(String name, int age) {
    user.update((val) {
      val!.name = name;
      val.age = age;
    });
  }
}

3. 创建视图（View）

视图是一个 StatelessWidget 或 StatefulWidget，它使用 GetBuilder 或 Obx 来监听控制器的状态变化。

import 'package:flutter/material.dart';
import 'package:get_mvc/get_mvc.dart';
import 'user_controller.dart';

class UserView extends StatelessWidget {
  final UserController userController = UserController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text('Name: ${userController.user.value.name}')),
            Obx(() => Text('Age: ${userController.user.value.age}')),
            ElevatedButton(
              onPressed: () {
                userController.updateUser('Jane', 30);
              },
              child: Text('Update User'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 在应用程序中使用 get_mvc

在你的 main.dart 文件中，你可以直接使用 UserView 作为应用程序的主页面。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVC Example',
      home: UserView(),
    );
  }
}
回到顶部