Flutter自定义页面生成插件mvvm_page_generator_custom的使用

mvvm_page_generator

A Dart package for making PMVVM Flutter pages with cmd or terminal [Duplicate]。

特性

  • 可以生成包含视图、视图模型和服务的页面，可以直接在任何PMVVM项目中使用。

开始使用

如果想在命令行中使用 mvvm_page_generator，可以使用以下命令安装：

pub global activate mvvm_page_generator_custom

使用方法

使用此包的方法如下：

dart run mvvm_page_generator_custom -c className

或者

dart pub global run mvvm_page_generator_custom -c className

示例代码

说明

只需在终端输入以下命令，并将 className 和 path/to/folder 替换为您的具体值即可。这是对原始插件的定制版本，原始插件由 https://github.com/abdelrahmanbonna 创建。

示例代码

dart run mvvm_page_generator_custom -c className -p path/to/folder

详细步骤

1. 安装插件

首先，确保已安装 mvvm_page_generator_custom 插件：

pub global activate mvvm_page_generator_custom

2. 生成页面

在终端中运行以下命令来生成页面：

dart run mvvm_page_generator_custom -c MyCustomPage -p lib/pages

上述命令会生成一个名为 MyCustomPage 的页面，包括视图（View）、视图模型（ViewModel）和服务（Service），并将它们保存到 lib/pages 文件夹中。

输出结果

生成的文件结构如下：

lib/
└── pages/
    ├── my_custom_page.dart       // 视图 (View)
    ├── my_custom_page_viewmodel.dart // 视图模型 (ViewModel)
    └── my_custom_page_service.dart   // 服务 (Service)

3. 查看生成的代码

视图 (View)

// lib/pages/my_custom_page.dart
import 'package:flutter/material.dart';
import 'my_custom_page_viewmodel.dart';

class MyCustomPage extends StatelessWidget {
  final MyCustomPageViewModel viewModel;

  const MyCustomPage({Key? key, required this.viewModel}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My Custom Page')),
      body: Center(
        child: Text('Hello from My Custom Page!'),
      ),
    );
  }
}

视图模型 (ViewModel)

// lib/pages/my_custom_page_viewmodel.dart
import 'package:flutter/material.dart';

class MyCustomPageViewModel {
  // 可以在这里添加业务逻辑
}

服务 (Service)

// lib/pages/my_custom_page_service.dart
class MyCustomPageService {
  // 可以在这里实现数据获取或其他服务功能
}

更多关于Flutter自定义页面生成插件mvvm_page_generator_custom的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义页面生成插件mvvm_page_generator_custom的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


mvvm_page_generator_custom 是一个用于 Flutter 的代码生成插件，旨在帮助开发者快速生成基于 MVVM 架构的页面代码。通过使用该插件，你可以减少手动编写重复代码的工作量，提高开发效率。

安装插件

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

dev_dependencies:
  mvvm_page_generator_custom: ^1.0.0

然后运行 flutter pub get 来安装插件。

使用插件

  1. 创建页面模型

    在你的项目中创建一个新的 Dart 文件，例如 home_page.dart，并在文件中定义你的页面模型。通常，页面模型会包含视图模型（ViewModel）和视图（View）的逻辑。

    import 'package:mvvm_page_generator_custom/mvvm_page_generator_custom.dart';

[@MVVMPage](/user/MVVMPage)(
  viewModel: 'HomeViewModel',
  view: 'HomeView',
)
class HomePage {}

  2. 运行代码生成器

    在终端中运行以下命令来生成代码：

    flutter pub run build_runner build

    这将会根据你在 HomePage 类上添加的 [@MVVMPage](/user/MVVMPage) 注解，自动生成相应的视图模型和视图代码。

  3. 使用生成的代码

    生成的代码将会在 home_page.g.dart 文件中。你可以在你的项目中使用这些生成的类来构建页面。

    import 'package:flutter/material.dart';
import 'home_page.dart'; // 导入生成的代码

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(), // 使用生成的页面
    );
  }
}

自定义生成器

mvvm_page_generator_custom 插件允许你通过注解来自定义生成的代码。例如，你可以指定视图模型的基类、视图的基类等。

[@MVVMPage](/user/MVVMPage)(
  viewModel: 'HomeViewModel',
  view: 'HomeView',
  viewModelBase: 'BaseViewModel',
  viewBase: 'BaseView',
)
class HomePage {}
回到顶部