Flutter命令行工具插件stacked_cli的使用

当然，stacked_cli 是一个用于 Flutter 的命令行工具插件，它旨在帮助开发者快速生成基于 Stacked 架构（一种常见的 Flutter 架构模式）的项目和文件。以下是如何使用 stacked_cli 的一些示例代码和步骤。

安装 stacked_cli

首先，你需要全局安装 stacked_cli。你可以通过 Dart 的命令行工具 pub 来完成这一步：

dart pub global activate stacked_cli

安装完成后，你可以通过运行 stacked 命令来访问 stacked_cli 的功能。

创建新项目

使用 stacked create 命令可以创建一个新的 Flutter 项目，并自动设置 Stacked 架构。

stacked create my_stacked_app

这将创建一个名为 my_stacked_app 的新 Flutter 项目，并配置好 Stacked 架构的基本结构。

生成 ViewModel

在 Stacked 架构中，ViewModel 是非常重要的组件。你可以使用 stacked generate viewmodel 命令来生成一个新的 ViewModel 文件。

cd my_stacked_app
stacked generate viewmodel MyViewModel

这将在 lib/viewmodels 目录下生成一个名为 my_view_model.dart 的文件（默认情况下文件名会转为小写并以下划线分隔单词）。

生成 View

类似地，你可以使用 stacked generate view 命令来生成一个新的 View 文件。

stacked generate view MyView

这将在 lib/views 目录下生成一个名为 my_view.dart 的文件。

生成 Route

在 Stacked 架构中，Routes 通常用于定义应用中的页面导航。你可以使用 stacked generate route 命令来生成一个新的 Route 文件。

stacked generate route MyRoute

这将在 lib/routes 目录下生成一个名为 my_route.dart 的文件。

示例代码结构

假设你已经按照上述步骤生成了一个简单的项目，你的项目结构可能如下所示：

my_stacked_app/
├── android/
├── ios/
├── lib/
│   ├── main.dart
│   ├── app.dart            # 应用的入口点，通常配置路由
│   ├── routes/
│   │   └── my_route.dart  # 自动生成的 Route 文件
│   ├── viewmodels/
│   │   └── my_view_model.dart  # 自动生成的 ViewModel 文件
│   └── views/
│       └── my_view.dart   # 自动生成的 View 文件
├── pubspec.yaml
└── ...

main.dart 示例

main.dart 通常会配置应用的 MaterialApp 和路由。

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'app.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Stacked App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ViewModelProvider<MyViewModel>.withConsumer(
        viewModelBuilder: () => MyViewModel(),
        builder: (context, model, child) => App(model: model),
      ),
    );
  }
}

app.dart 示例

app.dart 通常会定义应用的路由。

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'routes/my_route.dart';
import 'viewmodels/my_view_model.dart';
import 'views/my_view.dart';

class App extends StatelessWidget {
  final MyViewModel model;

  App({required this.model});

  @override
  Widget build(BuildContext context) {
    return Navigator(
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case MyRoute.routeName:
            return MaterialPageRoute(builder: (_) => MyView());
          default:
            return MaterialPageRoute(builder: (_) => Scaffold(body: Center(child: Text('404'))));
        }
      },
      initialRoute: MyRoute.routeName,
    );
  }
}

my_view_model.dart 示例

my_view_model.dart 定义了 ViewModel 的基本结构。

import 'package:stacked/stacked.dart';

class MyViewModel extends BaseViewModel {
  // 添加你的业务逻辑和数据
}

my_view.dart 示例

my_view.dart 是 View 的实现。

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'viewmodels/my_view_model.dart';

class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MyViewModel model = ViewModelProvider.of<MyViewModel>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('My View'),
      ),
      body: Center(
        child: Text('Hello, Stacked Architecture!'),
      ),
    );
  }
}

my_route.dart 示例

my_route.dart 定义了路由的名称。

class MyRoute {
  static const String routeName = '/my_route';
}

通过这些步骤和示例代码，你可以快速上手 stacked_cli 并生成基于 Stacked 架构的 Flutter 项目和文件。