内容

层间通信

内容

依赖注入
反馈

除了为架构的每个组件定义明确的职责外，还必须考虑组件如何通信。这既指规定通信的规则，也指组件如何通信的技术实现。应用程序的架构应回答以下问题

哪些组件允许与哪些其他组件通信（包括相同类型的组件）？
这些组件彼此公开哪些输出？
任何给定的层如何“连接”到另一层？

A diagram showing the components of app architecture.

以该图为例，交互规则如下

组件	交互规则
视图	一个视图只知道一个视图模型，并且永远不知道任何其他层或组件。创建时，Flutter 将视图模型作为参数传递给视图，从而将视图模型的数据和命令回调暴露给视图。
视图模型	一个视图模型属于一个视图，该视图可以查看其数据，但模型不需要知道视图的存在。一个视图模型知道一个或多个存储库，这些存储库被传递到视图模型的构造函数中。
存储库	一个存储库可以知道许多服务，这些服务作为参数传递到存储库的构造函数中。一个存储库可以被许多视图模型使用，但它不需要知道它们。
服务	一个服务可以被许多存储库使用，但它不需要知道存储库（或任何其他对象）。

本指南展示了这些不同的组件如何通过使用输入和输出相互通信。在每种情况下，两层之间的通信都是通过将组件传递到构造函数方法（使用其数据的组件的构造函数方法）中来实现的，例如将Service传递到Repository。

dartclass MyRepository {
  MyRepository({required MyService myService})
          : _myService = myService;

  late final MyService _myService;
}

但是，缺少的一件事是对象创建。在应用程序中，MyService 实例在哪里创建以便可以将其传递到MyRepository？这个问题的答案涉及一种称为依赖注入的模式。

在 Compass 应用程序中，依赖注入是使用package:provider 处理的。根据 Google 团队构建 Flutter 应用程序的经验，建议使用package:provider来实现依赖注入。

服务和存储库作为Provider对象暴露给 Flutter 应用程序的 widget 树的顶层。

dependencies.dart
dartrunApp(
  MultiProvider(
    providers: [
      Provider(create: (context) => AuthApiClient()),
      Provider(create: (context) => ApiClient()),
      Provider(create: (context) => SharedPreferencesService()),
      ChangeNotifierProvider(
        create: (context) => AuthRepositoryRemote(
          authApiClient: context.read(),
          apiClient: context.read(),
          sharedPreferencesService: context.read(),
        ) as AuthRepository,
      ),
      Provider(create: (context) =>
        DestinationRepositoryRemote(
          apiClient: context.read(),
        ) as DestinationRepository,
      ),
      Provider(create: (context) =>
        ContinentRepositoryRemote(
          apiClient: context.read(),
        ) as ContinentRepository,
      ),
      // In the Compass app, additional service and repository providers live here.
    ],
  ),
  child: const MainApp(),
);

服务仅公开以便可以通过provider 中的BuildContext.read 方法立即将其注入存储库，如前面的代码片段所示。然后公开存储库以便根据需要将其注入视图模型。

在 widget 树中稍低的位置，对应于全屏的视图模型在package:go_router 配置中创建，其中再次使用 provider 注入必要的存储库。

router.dart
dart// This code was modified for demo purposes.
GoRouter router(
  AuthRepository authRepository,
) =>
    GoRouter(
      initialLocation: Routes.home,
      debugLogDiagnostics: true,
      redirect: _redirect,
      refreshListenable: authRepository,
      routes: [
        GoRoute(
          path: Routes.login,
          builder: (context, state) {
            return LoginScreen(
              viewModel: LoginViewModel(
                authRepository: context.read(),
              ),
            );
          },
        ),
        GoRoute(
          path: Routes.home,
          builder: (context, state) {
            final viewModel = HomeViewModel(
              bookingRepository: context.read(),
            );
            return HomeScreen(viewModel: viewModel);
          },
          routes: [
            // ...
          ],
        ),
      ],
    );

在视图模型或存储库中，注入的组件应为私有。例如，HomeViewModel 类如下所示

home_viewmodel.dart
dartclass HomeViewModel extends ChangeNotifier {
  HomeViewModel({
    required BookingRepository bookingRepository,
    required UserRepository userRepository,
  })  : _bookingRepository = bookingRepository,
        _userRepository = userRepository;

  final BookingRepository _bookingRepository;
  final UserRepository _userRepository;

  // ...
}

私有方法可以防止具有访问视图模型权限的视图直接调用存储库上的方法。

这结束了 Compass 应用程序的代码演练。此页面仅演练了与架构相关的代码，但它并没有讲述完整的故事。大多数实用程序代码、widget 代码和 UI 样式都被忽略了。请浏览Compass 应用程序存储库中的代码，以获取根据这些原则构建的健壮 Flutter 应用程序的完整示例。

由于本网站的此部分正在发展，我们欢迎您的反馈！

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-12-04。查看源代码或报告问题.