Flutter架构设计与命令行工具插件architecture_cli的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter架构设计与命令行工具插件architecture_cli的使用

architecture_cli 是一个命令行界面工具,用于在Dart项目中生成不同软件架构模式的文件夹结构。它为每个文件夹提供了预期用途的指导,以促进良好的设计和关注点分离。

注意:如果存在`lib`目录,则架构将在`lib`目录内创建;否则,将在根目录创建。

支持的架构

architecture_cli 目前支持以下软件架构模式:

  • MVC(模型-视图-控制器)
  • MVVM(模型-视图-视图模型)
  • MVP(模型-视图-展示器)
  • 清洁架构
  • 提供者架构
  • GetX架构
  • BLoC(业务逻辑组件)架构
  • 仅BLoC结构

安装

您可以通过运行以下命令从 pub.dev 安装 architecture_cli

dart pub global activate architecture_cli

使用方法

要创建一个新的架构结构,请运行以下命令:

architecture_cli --create [name]

或者,您可以使用以下命令之一:

folder_cli --create [name]
arch_cli --create [name]

其中 [name] 是所需架构模式的名称。例如:

architecture_cli --create mvc

在生成架构结构后,您会在生成的文件夹结构中找到一个Markdown文件,该文件提供了每个文件夹的预期用途指南。

示例

以下是您可以使用的生成不同架构模式的命令的一些示例:

  • 生成GetX架构结构:
architecture_cli --create getx
  • 生成清洁架构结构:
architecture_cli --create clean_architecture
  • 生成MVP架构结构:
architecture_cli --create mvp
  • 生成提供者架构结构:
architecture_cli --create provider
  • 生成BLoC结构:
architecture_cli --create bloc
  • 生成BLoC应用结构:
architecture_cli --create bloc_app

支持

如果您觉得这个包对您有帮助,请考虑请我喝杯咖啡!

Buy Me A Coffee

感谢您的支持!

— 马德·帕维兹

Profile Picture

— 访问 devhammad.com


示例代码

示例/README.md

激活架构CLI

dart pub global activate architecture_cli

查看可用命令列表

architecture_cli --help
arch_cli --help
folder_cli --help

更多关于Flutter架构设计与命令行工具插件architecture_cli的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter架构设计与命令行工具插件architecture_cli的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中进行架构设计,并使用一个假想的命令行工具插件architecture_cli来辅助这一过程的示例。由于architecture_cli是一个假想的插件,我会基于常见的Flutter架构设计和命令行工具的使用方式来展示相关代码和流程。

Flutter 架构设计

Flutter应用通常遵循MVVM(Model-View-ViewModel)或BLoC(Business Logic Component)等架构模式。以下是一个简单的MVVM架构示例:

1. Model层

定义数据模型。

// models/user.dart
class User {
  final String id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as String,
      name: json['name'] as String,
      email: json['email'] as String,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
}

2. ViewModel层

处理业务逻辑和数据绑定。

// viewmodels/user_view_model.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'models/user.dart';

class UserViewModel with ChangeNotifier {
  List<User> _users = [];
  List<User> get users => _users;

  void fetchUsers() async {
    // 模拟从API获取数据
    final usersJson = [
      {'id': '1', 'name': 'Alice', 'email': 'alice@example.com'},
      {'id': '2', 'name': 'Bob', 'email': 'bob@example.com'},
    ];
    final users = usersJson.map((json) => User.fromJson(json)).toList();
    _users = users;
    notifyListeners();
  }
}

3. View层

定义用户界面。

// views/user_list.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'viewmodels/user_view_model.dart';
import 'models/user.dart';

class UserList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User List')),
      body: Consumer<UserViewModel>(
        builder: (context, userViewModel, child) {
          return userViewModel.users.isEmpty
              ? Center(child: CircularProgressIndicator())
              : ListView.builder(
                  itemCount: userViewModel.users.length,
                  itemBuilder: (context, index) {
                    final user = userViewModel.users[index];
                    return ListTile(
                      title: Text(user.name),
                      subtitle: Text(user.email),
                    );
                  },
                );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<UserViewModel>().fetchUsers();
        },
        tooltip: 'Fetch Users',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

4. Main入口

将ViewModel提供给应用。

// main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'views/user_list.dart';
import 'viewmodels/user_view_model.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => UserViewModel()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: UserList(),
    );
  }
}

使用假想的architecture_cli插件

假设architecture_cli是一个命令行工具,它可以帮助我们生成Flutter项目的架构文件。虽然这不是一个真实存在的插件,但我们可以想象它的使用方式,并编写一个模拟的脚本(不是Flutter代码,而是命令行脚本)来展示如何使用它。

示例命令行脚本(假设使用Bash)

#!/bin/bash

# 定义一个函数来模拟 architecture_cli 的行为
architecture_cli() {
  echo "architecture_cli: Generating Flutter architecture files..."

  # 创建 model 文件
  echo "class User {" > lib/models/user.dart
  echo "  final String id;" >> lib/models/user.dart
  echo "  final String name;" >> lib/models/user.dart
  echo "  final String email;" >> lib/models/user.dart
  echo "" >> lib/models/user.dart
  echo "  User({required this.id, required this.name, required this.email});" >> lib/models/user.dart
  echo "" >> lib/models/user.dart
  echo "  factory User.fromJson(Map<String, dynamic> json) {" >> lib/models/user.dart
  echo "    return User(" >> lib/models/user.dart
  echo "      id: json['id'] as String," >> lib/models/user.dart
  echo "      name: json['name'] as String," >> lib/models/user.dart
  echo "      email: json['email'] as String," >> lib/models/user.dart
  echo "    );" >> lib/models/user.dart
  echo "  }" >> lib/models/user.dart
  echo "" >> lib/models/user.dart
  echo "  Map<String, dynamic> toJson() {" >> lib/models/user.dart
  echo "    return {" >> lib/models/user.dart
  echo "      'id': id," >> lib/models/user.dart
  echo "      'name': name," >> lib/models/user.dart
  echo "      'email': email," >> lib/models/user.dart
  echo "    };" >> lib/models/user.dart
  echo "  }" >> lib/models/user.dart
  echo "}" >> lib/models/user.dart
  echo "" >> lib/models/user.dart

  # 创建 ViewModel 文件
  echo "import 'package:flutter/material.dart';" > lib/viewmodels/user_view_model.dart
  echo "import 'package:provider/provider.dart';" >> lib/viewmodels/user_view_model.dart
  echo "import 'package:your_app_name/models/user.dart';" >> lib/viewmodels/user_view_model.dart
  echo "" >> lib/viewmodels/user_view_model.dart
  echo "class UserViewModel with ChangeNotifier {" >> lib/viewmodels/user_view_model.dart
  echo "  List<User> _users = [];" >> lib/viewmodels/user_view_model.dart
  echo "  List<User> get users => _users;" >> lib/viewmodels/user_view_model.dart
  echo "" >> lib/viewmodels/user_view_model.dart
  echo "  void fetchUsers() async {" >> lib/viewmodels/user_view_model.dart
  echo "    // 模拟从API获取数据" >> lib/viewmodels/user_view_model.dart
  echo "    final usersJson = [" >> lib/viewmodels/user_view_model.dart
  echo "      {'id': '1', 'name': 'Alice', 'email': 'alice@example.com'}," >> lib/viewmodels/user_view_model.dart
  echo "      {'id': '2', 'name': 'Bob', 'email': 'bob@example.com'}," >> lib/viewmodels/user_view_model.dart
  echo "    ];" >> lib/viewmodels/user_view_model.dart
  echo "    final users = usersJson.map((json) => User.fromJson(json)).toList();" >> lib/viewmodels/user_view_model.dart
  echo "    _users = users;" >> lib/viewmodels/user_view_model.dart
  echo "    notifyListeners();" >> lib/viewmodels/user_view_model.dart
  echo "  }" >> lib/viewmodels/user_view_model.dart
  echo "}" >> lib/viewmodels/user_view_model.dart

  echo "architecture_cli: Files generated successfully."
回到顶部