Flutter插件de_comp的使用_DeComp 是一种架构方法，允许开发者构建高度可扩展的应用程序

DeComp 是一种架构方法，允许开发者构建高度可扩展的应用程序，这些应用程序由许多独立的组件组成，每个组件都是一个独立的包。

这种方法带来了几个显著的好处：

• 🎶 组件是自给自足且独立的；它封装了业务逻辑（甚至是复杂的情况），从而大大减少了代码重复。
• 🧩 组件不仅可以在不同的屏幕之间重用，还可以在多个应用程序之间重用。
• ⏱ 每个单独的组件可以独立开发。
• 🔥 要将组件嵌入到我们的UI中，只需要一行代码。

如何使用Flutter插件de_comp？

什么是组件？

一个组件有自己的UI和基于bloc包的业务逻辑。一个组件指定了它可以做什么（通过事件）、它在操作过程中可以生成什么数据或事件（通过动作）以及它需要什么数据来运行（通过组件仓库合同）。

组件对其环境一无所知：它不依赖于DI、本地化方法、从哪里获取数据等。所有这些任务都被转发到专门的抽象层。

组件可以包含其他组件，同时仍然保持上述承诺。

组件如何嵌入？

如上所述，组件对其如何使用、如何获取所需数据并不了解。它完全依赖其合同来描述其需求。

当我们把这样的组件嵌入到我们的应用中时，我们需要提供这些合同的实现。这就是巧妙的部分：我们通过协调器和视图来完成这一点。

协调器

协调器是一个类，描述了组件（甚至组件内部的组件）如何与外部世界和其他组件进行通信。

视图

视图位于协调器之上，其唯一目的是使用你选择的方法（单例、DI或其他任何方法）构造组件所需的Bloc。

这很有意义，因为我们在构建特定的应用程序领域工作，而不是在组件内部工作，因此不会硬连线任何外部依赖项，并保持组件的独立性。

入门指南

强烈建议查看/example项目以了解这一切是如何结合在一起的。

示例代码

以下是一个简单的示例代码，展示如何使用 de_comp 插件创建一个组件并将其嵌入到应用中。

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:de_comp/de_comp.dart';

// 定义一个简单的事件
class ExampleEvent extends Event {
  final String message;

  ExampleEvent(this.message);
}

// 定义一个简单的动作
class ExampleAction extends Action {
  final String result;

  ExampleAction(this.result);
}

// 定义一个组件仓库接口
abstract class ExampleComponentRepository {
  Future<String> fetchData();
}

// 实现组件仓库接口
class ExampleComponentRepositoryImpl implements ExampleComponentRepository {
  [@override](/user/override)
  Future<String> fetchData() async {
    return 'Hello from repository!';
  }
}

// 定义一个Bloc
class ExampleBloc extends Bloc<ExampleEvent, ExampleAction> {
  final ExampleComponentRepository _repository;

  ExampleBloc(this._repository);

  [@override](/user/override)
  Stream<ExampleAction> mapEventToState(ExampleEvent event) async* {
    if (event is ExampleEvent) {
      final data = await _repository.fetchData();
      yield ExampleAction(data);
    }
  }
}

// 定义一个组件
class ExampleComponent extends Component<ExampleEvent, ExampleAction> {
  final ExampleBloc _bloc;

  ExampleComponent(this._bloc);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StreamBuilder<ExampleAction>(
      stream: _bloc.state,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text(snapshot.data!.result);
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

// 主应用
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DeComp Example'),
        ),
        body: Builder(
          builder: (context) {
            // 创建组件仓库实例
            final repository = ExampleComponentRepositoryImpl();

            // 创建Bloc实例
            final bloc = ExampleBloc(repository);

            // 创建组件实例
            final component = ExampleComponent(bloc);

            // 创建协调器
            final coordinator = Coordinator(component);

            // 创建视图
            final view = View(coordinator);

            return view;
          },
        ),
      ),
    );
  }
}