Flutter结构化布局插件structorize的使用

structorize 是一个用于快速生成 Flutter 项目结构的工具，帮助开发者快速搭建基于分层架构（如领域驱动设计）的应用程序。通过简单的命令，你可以生成符合标准的目录结构和必要的配置文件。

安装

首先，在 pubspec.yaml 文件中添加 structorize 作为开发依赖：

dev_dependencies:
  structorize: ^0.0.1+2

然后运行以下命令以安装依赖：

flutter pub get

配置

在项目中初始化 structorize，运行以下命令：

flutter pub run structorize:start

该命令会修改你的项目文件并生成所需的目录结构。此外，还需要运行以下命令以确保一切正常：

flutter pub run gen_i18n:initialize --locale-en-pt
flutter packages pub run build_runner build --delete-conflicting-outputs

注意：运行这些命令时，请确保项目没有其他重要配置，因为 structorize 会修改一些文件（如 main.dart 和 pubspec.yaml）。

生成的结构

运行上述命令后，structorize 会为你生成一个基于领域驱动设计（DDD）的目录结构。以下是生成的结构概览：

简化视图

.
├── ...
└── lib                         # 预定义目录
    ├── i18n                    # 负责翻译类
    ├── src                     
    │   ├── application         # 应用层，包含 DTO 和 UseCase
    │   ├── domain              # 领域层，包含模型和服务
    │   ├── infrastructure      # 基础设施层，包含 Repository、Firebase 和 Sqflite
    │   ├── injection           # 注入模块，负责依赖注入的配置
    │   ├── presentation        # 表现层，包含用户界面和 Notifier
    │   ├── utils               # 工具类
    │   ├── extension           # 扩展类
    │   └── app.dart            # 应用配置文件
    ├── main.dart               # 主文件
    └── route.dart              # 定义应用路由

详细视图

|-- lib
|   |-- i18n
|   |   '-- i18n.dart
|   |-- main.dart
|   |-- route.dart
|   '-- src
|       |-- app.dart
|       |-- application
|       |   '-- core
|       |       |-- base_view_model.dart
|       |       '-- base_view_model.g.dart
|       |-- domain
|       |   '-- core
|       |       |-- api.dart
|       |       |-- navigator
|       |       |   '-- navigation_service.dart
|       |       '-- value_objects
|       |           '-- enum_values.dart
|       |-- infrastructure
|       |   '-- core
|       |       |-- http_client
|       |       |   |-- api_endpoints.dart
|       |       |   '-- dio_builder.dart
|       |       '-- navigator
|       |           '-- default_navigation_service.dart
|       |-- injection
|       |   |-- config.dart
|       |   |-- injectable_module.dart
|       |   '-- injection.dart
|       |-- presentation
|       |   |-- core
|       |   |   |-- animation_route.dart
|       |   |   |-- components
|       |   |   |   |-- base_component.dart
|       |   |   |   |-- bottom_sheet_container.dart
|       |   |   |   |-- default_app_bar.dart
|       |   |   |   '-- icon.dart
|       |   |   |-- functions.dart
|       |   |   '-- transparent_page_route.dart
|       |   |-- empty_screen.dart
|       |   '-- splash_screen.dart
|       '-- utils
|           |-- color_util.dart
|           |-- constants.dart
|           |-- size_util.dart
|           '-- theme_util.dart
|-- pubspec.yaml
'-- test
    '-- widget_test.dart

示例代码

以下是一个生成的示例代码，展示了如何初始化项目并启动应用：

// This is code generated via package:structorize/start.dart

import 'package:example/i18n/i18n.dart'; // 国际化支持
import 'package:example/src/app.dart';   // 应用入口
import 'package:example/src/infrastructure/core/http_client/api_endpoints.dart'; 
import 'package:example/src/infrastructure/core/http_client/dio_builder.dart'; 
import 'package:example/src/injection/config.dart'; 
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';  

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化 Flutter 绑定

  // 初始化国际化
  await I18n.initialize(
      defaultLocale: Locale('en'),  
      supportLocales: [Locale('en'), Locale('pt')]  
  );

  // 获取共享偏好设置实例
  var shared = await SharedPreferences.getInstance();

  // 配置 HTTP 客户端
  final dio = DioBuilder()
    ..setBaseUrl(ApiEndpoints.apiBaseUrl) 
    ..setTimeout(const Duration(seconds: 20));

  // 初始化依赖注入
  Config.initialize(shared, dio.build());

  // 启动应用
  runApp(App());
}

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

yuanlaile 1楼

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

Structorize 是一个用于 Flutter 的结构化布局插件，旨在帮助开发者更高效地组织和构建 UI 布局。通过 Structorize，开发者可以将复杂的 UI 布局分解为更小、更易管理的部分，从而提高代码的可读性和可维护性。

安装 `Structorize`

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

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

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

使用 `Structorize`

Structorize 提供了一种结构化的方式来构建 Flutter 布局。它主要通过 Structorize 组件来实现，该组件允许你将布局分解为多个部分。

基本用法

以下是一个简单的示例，展示如何使用 Structorize 来组织布局：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Structorize Example'),
        ),
        body: Structorize(
          children: [
            StructorizeSection(
              title: 'Header',
              child: Container(
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Header Section',
                    style: TextStyle(color: Colors.white, fontSize: 24),
                  ),
                ),
              ),
            ),
            StructorizeSection(
              title: 'Content',
              child: Container(
                height: 200,
                color: Colors.green,
                child: Center(
                  child: Text(
                    'Content Section',
                    style: TextStyle(color: Colors.white, fontSize: 24),
                  ),
                ),
              ),
            ),
            StructorizeSection(
              title: 'Footer',
              child: Container(
                height: 100,
                color: Colors.red,
                child: Center(
                  child: Text(
                    'Footer Section',
                    style: TextStyle(color: Colors.white, fontSize: 24),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们使用了 Structorize 组件来将布局分解为三个部分：Header、Content 和 Footer。每个部分都包裹在 StructorizeSection 组件中，并且可以单独定制。

自定义 `StructorizeSection`

StructorizeSection 组件允许你为每个部分添加标题和自定义的样式。你可以通过 title 属性来设置标题，并通过 child 属性来定义该部分的内容。

StructorizeSection(
  title: 'Custom Section',
  titleStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  backgroundColor: Colors.yellow,
  padding: EdgeInsets.all(16),
  child: Container(
    height: 150,
    color: Colors.orange,
    child: Center(
      child: Text(
        'Custom Section Content',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
),

在这个例子中，我们自定义了 StructorizeSection 的标题样式、背景颜色和内边距。

高级用法

Structorize 还支持更复杂的布局结构，例如嵌套的 Structorize 组件。你可以将 Structorize 组件嵌套在另一个 StructorizeSection 中，以创建更复杂的 UI 布局。

StructorizeSection(
  title: 'Nested Structorize',
  child: Structorize(
    children: [
      StructorizeSection(
        title: 'Nested Section 1',
        child: Container(
          height: 100,
          color: Colors.purple,
          child: Center(
            child: Text(
              'Nested Section 1',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
      StructorizeSection(
        title: 'Nested Section 2',
        child: Container(
          height: 100,
          color: Colors.teal,
          child: Center(
            child: Text(
              'Nested Section 2',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
    ],
  ),
),

Flutter结构化布局插件structorize的使用

Flutter结构化布局插件structorize的使用

安装

配置

生成的结构

简化视图

详细视图

示例代码

安装 Structorize

使用 Structorize

基本用法

自定义 StructorizeSection

高级用法

安装 `Structorize`

使用 `Structorize`

自定义 `StructorizeSection`