Flutter工具集插件stacked_tools的使用

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

Flutter工具集插件stacked_tools的使用

Stacked CLI

stacked_tools 是一个专为 stacked 框架设计的命令行工具（CLI）。stacked 是一个用 Flutter 构建的框架，适用于生产团队。它旨在提高维护性、可读性和扩展性。要了解如何使用此工具，请阅读 Stacked CLI 文档。

运行代码

要本地运行项目，请执行以下步骤：

# 如果你在 stacked_tools 文件夹内，使用 . 否则使用到 stacked_tools 目录的路径
dart pub global activate --source path .

代码结构

以下是代码结构的概述，以解释各个部分是如何构建的。

.
├── lib
│   ├── src
│   │   └── templates
│   │       └── template_constants.dart
├── example
│   ├── lib
│   │   └── main.dart
│   └── pubspec.yaml
└── stacked_tools
    ├── bin
    │   └── stacked_cli.dart
    └── pubspec.yaml

模板

模板是以 Mustache 模板引擎编写的普通 Dart 文件。可以被模板化的文件应该以 .stk 结尾。所有可以在模板中替换的常量可以在 lib/src/templates/template_constants.dart 中找到。目前需要替换的值包括：

  • viewName: 视图类的名称。例如给定名称 ‘details’，期望 viewName 等于 DetailsView。
  • viewFolderName: 视图将创建的文件夹名称。这是 snake_case 版本的名称。
  • viewFileName: 视图创建的文件名，带 Dart 扩展名。例如给定名称 ‘details’，期望 viewFileName 等于 details_view.dart。
  • viewModelName: 视图模型类的名称。例如给定名称 ‘details’，期望 viewModelName 等于 DetailsViewModel。
  • viewModelFileName: 视图模型创建的文件名，带 Dart 扩展名。例如给定名称 ‘details’，期望 viewModelFileName 等于 details_viewmodel.dart。
  • packageName: CLI 工具正在运行的包名。这从根目录的 pubspec.yaml 文件中读取。
  • serviceName: Dart 中服务类的名称。例如给定服务名称 ‘stripe’，期望 serviceName 等于 StripeService。
  • serviceFilename: 服务类存储的文件名。例如给定名称 ‘stripe’，期望 serviceFilename 等于 stripe_service.dart。

示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:example/app/app.locator.dart'; // 导入依赖注入配置
import 'package:example/ui/common/app_colors.dart'; // 导入颜色配置
import 'package:example/ui/setup/setup_bottom_sheet_ui.dart'; // 导入底部弹窗配置
import 'package:example/ui/setup/setup_dialog_ui.dart'; // 导入对话框配置
import 'package:stacked_services/stacked_services.dart'; // 导入 StackedServices 包

import 'app/app.router.dart'; // 导入路由配置

void main() {
  setupLocator(); // 初始化依赖注入
  setupDialogUi(); // 初始化对话框配置
  setupBottomSheetUi(); // 初始化底部弹窗配置

  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用标题
      theme: Theme.of(context).copyWith(
        primaryColor: kcBackgroundColor, // 设置主颜色
        focusColor: kcPrimaryColor, // 设置焦点颜色
        textTheme: Theme.of(context).textTheme.apply(
              bodyColor: Colors.black, // 设置文本颜色
            ),
      ),
      initialRoute: Routes.startupView, // 初始路由
      onGenerateRoute: StackedRouter().onGenerateRoute, // 路由生成器
      navigatorKey: StackedService.navigatorKey, // 导航键
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用stacked_tools插件的示例代码。stacked_tools是一个辅助工具集，通常与stacked架构一起使用，用于简化Flutter应用的开发过程。尽管stacked_tools可能包含多个实用程序，但在这个示例中，我们将重点展示如何使用其中的一个常见功能。

首先，确保你已经在pubspec.yaml文件中添加了stacked_tools依赖：

dependencies:
  flutter:
    sdk: flutter
  stacked: ^x.x.x  # 确保你使用的是与stacked_tools兼容的版本
  stacked_tools: ^y.y.y  # 替换为最新的版本号

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

接下来，让我们看一个简单的示例，展示如何使用stacked_tools中的某个功能（假设我们使用的是其中的日志记录功能）。

示例代码

  1. 导入必要的包
import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'package:stacked_tools/stacked_tools.dart'; // 导入stacked_tools
  1. 配置日志记录

你可以在应用的入口点（例如main.dart）中配置日志记录。stacked_tools提供了方便的日志记录功能，你可以根据需要调整日志级别。

void main() {
  // 配置日志记录
  Logger.level = LogLevel.verbose; // 设置日志级别，可以是debug, info, verbose, warning, error
  Logger.onRecord = (LogRecord record) {
    // 自定义日志输出，这里我们简单地打印到控制台
    print('${record.level.name}: ${record.message}');
  };

  runApp(MyApp());
}
  1. 在ViewModel中使用日志记录

接下来，我们在一个ViewModel中使用日志记录功能。假设我们有一个简单的计数器ViewModel。

import 'package:stacked/stacked.dart';
import 'package:stacked_tools/stacked_tools.dart'; // 导入stacked_tools以使用Logger

class CounterViewModel extends BaseViewModel {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    Logger.info('Counter incremented to $_count'); // 记录信息日志
    notifyListeners();
  }
}
  1. 在UI中使用ViewModel

最后，我们在UI组件中使用这个ViewModel，并展示计数器的值。

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'counter_viewmodel.dart'; // 导入我们之前定义的ViewModel

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ViewModelProvider<CounterViewModel>.withConsumer(
      viewModelBuilder: () => CounterViewModel(),
      builder: (context, model, child) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Counter Example'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${model.count}',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: model.increment,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        );
      },
    );
  }
}

总结

这个示例展示了如何在Flutter项目中使用stacked_tools插件进行日志记录。你可以根据需要调整和扩展这个示例，以利用stacked_tools提供的其他功能。请注意，由于stacked_tools的具体功能和API可能会随着版本的更新而变化，因此建议查阅最新的官方文档以获取最准确的信息。

回到顶部