Flutter插件dependy_flutter的使用_Dependy Flutter 是基于 Dependy 构建的，它添加了作用域特性，帮助我们在 Flutter 应用程序的 widget 树中管理依赖项。

关于

Dependy Flutter 是基于 Dependy 构建的，它添加了作用域特性，帮助我们在 Flutter 应用程序的 widget 树中管理依赖项。

安装

要将 Dependy Flutter 添加到我们的项目中，我们需要更新 pubspec.yaml 文件：

dependencies:
  dependy: ^1.2.0
  dependy_flutter: ^1.2.0

接下来，我们运行以下命令来安装依赖项：

flutter pub get

导入

要使用 Dependy Flutter，我们需要导入必要的库：

import 'package:dependy/dependy.dart';
import 'package:dependy_flutter/dependy_flutter.dart';

为什么作用域很重要

临时生命周期

某些服务应该只有短暂的生命周期。通过作用域，我们可以创建仅在需要时存在的服务，并在不再需要时将其销毁。

特定用途

作用域非常适合与特定上下文相关的服务，例如视图模型或特定屏幕或路由上的状态。这意味着我们可以为应用程序的不同部分拥有不同的服务实例。

资源管理

通过限制某些服务的持续时间，我们可以确保在不再需要时释放资源。

何时使用作用域

屏幕特定的服务

如果我们有仅与特定屏幕相关的视图模型或服务，作用域可以帮助我们管理它们的生命周期，而不会影响应用程序的其他部分。

基于路由的作用域

当我们导航到不同的路由时，我们可以根据当前路由创建和销毁作用域。这适用于不应超过当前路由的服务。

性能优化

通过作用域服务，我们可以避免不必要的实例长时间保留在内存中，从而更好地利用系统资源。

用法

使用ScopedDependyModuleMixin

这是一个示例，演示如何使用 [ScopedDependyModuleMixin]。

// 在此示例中，我们将展示如何使用 [ScopedDependyModuleMixin]。
//
// [ScopedDependyModuleMixin] 只能应用于 [StatefulWidget]。
//
// 它为应用的 [Widget] 提供作用域功能。

/// 我们应用 [ScopedDependyModuleMixin] 来提供作用域。
/// 这个作用域管理 [Example1State] 服务的生命周期。
///
/// [Example1State] 将存在，只要 [_MyHomePageState] 存在。
class _MyHomePageState extends State<MyHomePage> with ScopedDependyModuleMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder(
      /// watchDependy 是来自 [ScopedDependyModuleMixin] 的函数。
      /// 它只接受一个 [ChangeNotifier] 并在每次更改通知时触发重建。
      future: watchDependy<Example1State>(),
      builder: (context, snapshot) {
        final state = snapshot.data;

        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: const Text('Example 1 (Using ScopedDependyModuleMixin)'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${state?.counter}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () async {
              /// 这里我们可以直接使用 state.incrementCounter()。
              ///
              /// 但为了演示目的，当不需要观察服务时，
              /// 我们可以使用来自 [ScopedDependyModuleMixin] 的函数 `dependy`
              /// 来读取服务而不观察它。
              final state = await dependy<Example1State>();
              state.incrementCounter();
            },
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        );
      },
    );
  }

  /// 必须实现此函数以返回一个模块
  /// 该模块的作用域是 [_MyHomePageState] 的生命周期。
  ///
  /// 注意：不要在这里返回单例模块，因为一旦该 [Widget] 从树中移除，该模块将被销毁。
  /// 例如：
  /// ```dart
  ///   return example1ServicesModule; // 不要这样做！
  /// ```

  /// 如果你没有覆盖或提供任何特定于此 [Widget] 的额外模块或提供者，则可能不需要使用 [ScopedDependyModuleMixin]。
  [@override](/user/override)
  DependyModule moduleBuilder() {
    /// 作用域为 [_MyHomePageState] 的模块。
    ///
    /// 注意：[example1ServicesModule/submodules] 不会销毁。
    return DependyModule(
      providers: {
        DependyProvider<Example1State>(
          (dependy) async {
            // 这里我们从 [example1ServicesModule] 中解析日志服务。
            final logger = await dependy<LoggerService>();

            // 我们最终返回将在 [_MyHomePageState] 中使用的实例。
            return Example1State(logger);
          },
          dependsOn: {
            LoggerService, // 我们的 [Example1State] 依赖于 [LoggerService]。
          },
        ),
      },
      modules: {
        example1ServicesModule,
      },
    );
  }
}

使用ScopedDependyProvider

这是一个示例，演示如何使用 [ScopedDependyProvider] widget。

// 在此示例中，我们将展示如何使用 [ScopedDependyProvider] widget。

/// 没有应用 [ScopedDependyModuleMixin]，且 [MyHomePage] 是一个 [StatelessWidget]
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 从前面的例子中，我们学习了如何使用 [ScopedDependyModuleMixin]
    ///
    /// 这是一个替代方法，如何通过 [ScopedDependyProvider] 来作用域 [dependy] 模块。
    ///
    /// [ScopedDependyProvider] 接受：
    /// - [builder] 函数，用于构建 UI，并提供回 [BuildContext] 和一个 [scope] 对象，让我们访问 [dependy/watchDependy] 方法，如 `example 1` 所示
    ///
    /// - [moduleBuilder] 函数，提供给我们一个 [parentModule] 并期望一个 [DependyModule] 实例作用域于此 [Widget]
    ///
    return ScopedDependyProvider(
      builder: (context, scope) {
        return FutureBuilder(
          /// 这里我们检索一个 [Example2State] 实例，同时也观察它。
          ///
          /// 任何由它发出的变化都将触发重建。
          future: scope.watchDependy<Example2State>(),
          builder: (context, snapshot) {
            final state = snapshot.data;

            return Scaffold(
              appBar: AppBar(
                backgroundColor: Theme.of(context).colorScheme.inversePrimary,
                title: const Text('Example 2 (ScopedDependyProvider)'),
              ),
              body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text(
                      'You have pushed the button this many times:',
                    ),
                    Text(
                      '${state?.counter}',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                  ],
                ),
              ),
              floatingActionButton: FloatingActionButton(
                onPressed: () {
                  state?.incrementCounter();
                },
                tooltip: 'Increment',
                child: const Icon(Icons.add),
              ),
            );
          },
        );
      },

      /// 必须实现此函数以返回一个模块
      /// 该模块的作用域是 [_MyHomePageState] 的生命周期。
      ///
      /// 注意：不要在这里返回单例模块，因为一旦该 [Widget] 从树中移除，该模块将被销毁。
      /// 例如：
      /// ```dart
      ///   return example2ServicesModule; // 不要这样做！
      /// ```

      /// 如果你没有覆盖或提供任何特定于此 [Widget] 的额外模块或提供者，则可能不需要使用 [ScopedDependyModuleMixin]。
      moduleBuilder: (_) {
        /// 作用域为 [_MyHomePageState] 的模块。
        ///
        /// 注意：[example2ServicesModule/submodules] 不会销毁。
        return DependyModule(
          providers: {
            DependyProvider<Example2State>(
              (dependy) async {
                // 这里我们从 [example2ServicesModule] 中解析日志服务。
                final logger = await dependy<LoggerService>();

                // 我们最终返回将在 [_MyHomePageState] 中使用的实例。
                return Example2State(logger);
              },
              dependsOn: {
                LoggerService,
                // 我们的 [Example2State] 依赖于 [LoggerService]。
              },
            ),
          },
          modules: {
            example2ServicesModule,
          },
        );
      },
    );
  }
}

使用ScopedDependyProvider共享作用域

这是一个更复杂的示例，展示了如何使用 [ScopedDependyProvider] 共享作用域以避免属性钻取。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 在这里，我们通过 [ScopedDependyProvider] 在此 widget 级别提供作用域。
    /// 设置 [shareScope] 为 true，这会让此作用域可以从 widget 树的所有后代中访问。
    return ScopedDependyProvider(
      shareScope: true,
      builder: (context, scope) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: const Text('Example 3 (Share Scope ScopedDependyProvider)'),
          ),
          body: const Center(
            /// 注意，我们没有直接传递任何状态给 [CounterView]。
            /// 相反，它将访问共享作用域并检索所需的状态。
            child: CounterView(),
          ),

          /// 类似地，[CounterButton] 也将使用共享作用域来
          /// 访问 [CounterService] 并修改其状态。
          floatingActionButton: const CounterButton(),
        );
      },
      moduleBuilder: (_) {
        /// 注意，有一些不同之处。
        ///
        /// 因为 [CounterService] 存在于 [example3ServicesModule] 中，我们没有提供它。
        ///
        /// 如果我们需要覆盖它，可以在 `providers` 中提供。
        ///
        /// 注意：正如我们在前面的示例中所学，我们不应该直接从这个函数返回 [example3ServicesModule]，因为当 widget 从树中移除时，它将被销毁。（子模块不会）
        return DependyModule(
          providers: {},
          modules: {
            example3ServicesModule,
          },
        );
      },
    );
  }
}

/// [CounterButton] 负责增加计数器值。
class CounterButton extends StatelessWidget {
  const CounterButton({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 我们使用 [ScopedDependyConsumer] 来隔离此 widget 内部的重建。
    ///
    /// 我们也可以做类似的事情
    /// ```dart
    ///   final scope = getDependyScope(context);
    ///   final counterService = scope.watchDependy<CounterService>();
    /// ```
    ///
    /// 但这将在 [ScopedDependyProvider] 级别注册监听器，导致它重建。
    return ScopedDependyConsumer(
      builder: (context, scope) {
        return FloatingActionButton(
          onPressed: () async {
            /// 当按钮被按下时，我们调用 [increment()] 更新计数器。
            final counterService = await scope.dependy<CounterService>();
            counterService.increment();
          },
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        );
      },
    );
  }
}

/// [CounterView] 负责显示当前计数器值。
class CounterView extends StatelessWidget {
  const CounterView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopedDependyConsumer(
      builder: (context, scope) {
        return FutureBuilder(
          /// 这里我们正在观察 [CounterService] 并重建最新的计数值。
          future: scope.watchDependy<CounterService>(),
          builder: (context, snapshot) {
            final counterService = snapshot.data;

            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${counterService?.counter}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            );
          },
        );
      },
    );
  }
}

使用ScopedDependyModuleMixin共享作用域

这是一个示例，展示如何使用 [ScopedDependyModuleMixin] 共享作用域。

// 从 `example-3` 我们了解了如何使用 [ScopedDependyProvider] 共享作用域

// 在此示例中，我们将使用 [ScopedDependyModuleMixin]
//
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with ScopedDependyModuleMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 在 [ScopedDependyProvider] 上，我们可以设置 shareScope: true，但在使用
    /// [ScopedDependyModuleMixin] 时，我们可以调用 [shareDependyScope]，它实现了完全相同的功能。
    return shareDependyScope(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Example 4 (Share Scope ScopedDependyModuleMixin)'),
        ),
        body: const Center(
          /// 注意，我们没有直接传递任何状态给 [CounterView]。
          /// 相反，它将访问共享作用域并检索所需的状态。
          child: CounterView(),
        ),

        /// 类似地，[CounterButton] 将使用共享作用域来
        /// 访问 [CounterService] 并修改其状态。
        floatingActionButton: const CounterButton(),
      ),
    );
  }

  [@override](/user/override)
  DependyModule moduleBuilder() {
    /// 注意，有一些不同之处。
    ///
    /// 因为 [CounterService] 存在于 [example4ServicesModule] 中，我们没有提供它。
    ///
    /// 如果我们需要覆盖它，可以在 `providers` 中提供。
    ///
    /// 注意：正如我们在前面的示例中所学，我们不应该直接从这个函数返回 [example4ServicesModule]，因为当 widget 从树中移除时，它将被销毁。（子模块不会）
    return DependyModule(
      providers: {},
      modules: {
        example4ServicesModule,
      },
    );
  }
}

/// [CounterButton] 负责增加计数器值。
class CounterButton extends StatelessWidget {
  const CounterButton({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 我们使用 [ScopedDependyConsumer] 来隔离此 widget 内部的重建。
    ///
    /// 我们也可以做类似的事情
    /// ```dart
    ///   final scope = getDependyScope(context);
    ///   final counterService = scope.watchDependy<CounterService>();
    /// ```
    ///
    /// 但这将在 [ScopedDependyProvider] 级别注册监听器，导致它重建。
    return ScopedDependyConsumer(
      builder: (context, scope) {
        return FloatingActionButton(
          onPressed: () async {
            /// 当按钮被按下时，我们调用 [increment()] 更新计数器。
            final counterService = await scope.dependy<CounterService>();
            counterService.increment();
          },
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        );
      },
    );
  }
}

/// [CounterView] 负责显示当前计数器值。
class CounterView extends StatelessWidget {
  const CounterView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopedDependyConsumer(
      builder: (context, scope) {
        return FutureBuilder(
          /// 这里我们正在观察 [CounterService] 并重建最新的计数值。
          future: scope.watchDependy<CounterService>(),
          builder: (context, snapshot) {
            final counterService = snapshot.data;

            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${counterService?.counter}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            );
          },
        );
      },
    );
  }
}

使用ScopedDependyModuleMixin共享多个作用域

这是一个示例，展示如何使用 [ScopedDependyModuleMixin] 共享多个作用域。

// 从之前的示例中，我们了解了如何共享作用域。
//
// 在此示例中，我们将演示如何在共享时使用多个作用域。
//
// 应用
//    -- LoggerService
//    MyHomePage
//        -- CounterService
//        CounterButton
//            -- 访问 LoggerService
//            -- 访问 CounterService
//        CounterView
//            -- 访问 LoggerService
//            -- 访问 CounterService

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with ScopedDependyModuleMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 分享依赖作用域给后代
    ///
    /// 在这种情况下，在整个应用程序级别
    return shareDependyScope(
      child: MaterialApp(
        title: 'Example 5 (Share Multiple Scopes using ScopedDependyModuleMixin)',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(),
      ),
    );
  }

  [@override](/user/override)
  DependyModule moduleBuilder() {
    return DependyModule(
      providers: {
        // 在 widget 作用域中提供 Logger 服务
        DependyProvider<LoggerService>(
          (_) => ConsoleLoggerService(),
        ),
      },
      modules: {},
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with ScopedDependyModuleMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return shareDependyScope(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text(
            'Example 5 (Share Multiple Scopes using ScopedDependyModuleMixin)',
          ),
        ),
        body: const Center(
          child: CounterView(),
        ),
        floatingActionButton: const CounterButton(),
      ),
    );
  }

  [@override](/user/override)
  DependyModule moduleBuilder() {
    return DependyModule(
      providers: {
        // 在 widget 作用域中提供 [CounterService]
        DependyProvider<CounterService>(
          (dependy) async {
            final loggerService = await dependy<LoggerService>();

            // 增量步长为 5
            return CounterServiceImpl(5, loggerService);
          },
          dependsOn: {
            LoggerService,
          },
        ),
      },
      modules: {
        // 此函数来自 [ScopedDependyModuleMixin]
        // 如果需要在该作用域中使用服务，请导入它。
        parentModule(),
      },
    );
  }
}

/// [CounterButton] 负责增加计数器值。
class CounterButton extends StatelessWidget {
  const CounterButton({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopedDependyConsumer(
      builder: (context, scope) {
        return FloatingActionButton(
          onPressed: () async {
            // [LoggerService] 在这个例子中位于两个作用域之上。
            final loggerService = await scope.dependy<LoggerService>();
            loggerService.log('CounterButton onPressed');

            /// 当按钮被按下时，我们调用 [increment()] 更新计数器。
            final counterService = await scope.dependy<CounterService>();
            counterService.increment();
          },
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        );
      },
    );
  }
}

/// [CounterView] 负责显示当前计数器值。
class CounterView extends StatelessWidget {
  const CounterView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopedDependyConsumer(
      builder: (context, scope) {
        return FutureBuilder(
          /// 这里我们正在观察 [CounterService] 并重建最新的计数值。
          future: scope.watchDependy<CounterService>(),
          builder: (context, snapshot) {
            final counterService = snapshot.data;

            // [LoggerService] 在这个例子中位于两个作用域之上。
            scope.dependy<LoggerService>().then(
              (value) => value.log("CounterView build"),
            );

            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${counterService?.counter}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            );
          },
        );
      },
    );
  }
}

使用ScopedDependyProvider共享多个作用域

这是使用 [ScopedDependyProvider] 共享多个作用域的相同用例。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopedDependyProvider(
      shareScope: true,
      builder: (context, scope) {
        return MaterialApp(
          title: 'Example 6 (Share Multiple Scopes using ScopedDependyProvider)',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(),
        );
      },
      moduleBuilder: (_) {
        return DependyModule(
          providers: {
            // 在 widget 作用域中提供 Logger 服务
            DependyProvider<LoggerService>(
              (_) => ConsoleLoggerService(),
            ),
          },
          modules: {},
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopedDependyProvider(
      shareScope: true,
      builder: (context, scope) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: const Text(
              'Example 6 (Share Multiple Scopes using ScopedDependyProvider)',
            ),
          ),
          body: const Center(
            child: CounterView(),
          ),
          floatingActionButton: const CounterButton(),
        );
      },
      moduleBuilder: (parentModule) {
        return DependyModule(
          providers: {
            // 在 widget 作用域中提供 [CounterService]
            DependyProvider<CounterService>(
              (dependy) async {
                final loggerService = await dependy<LoggerService>();

                // 增量步长为 5
                return CounterServiceImpl(5, loggerService);
              },
              dependsOn: {
                LoggerService,
              },
            ),
          },
          modules: {
            // 我们导入父级模块
            parentModule(),
          },
        );
      },
    );
  }
}

/// [CounterButton] 负责增加计数器值。
class CounterButton extends StatelessWidget {
  const CounterButton({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopedDependyConsumer(
      builder: (context, scope) {
        return FloatingActionButton(
          onPressed: () async {
            // [LoggerService] 在这个例子中位于两个作用域之上。
            final loggerService = await scope.dependy<LoggerService>();
            loggerService.log('CounterButton onPressed');

            /// 当按钮被按下时，我们调用 [increment()] 更新计数器。
            final counterService = await scope.dependy<CounterService>();
            counterService.increment();
          },
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        );
      },
    );
  }
}

/// [CounterView] 负责显示当前计数器值。
class CounterView extends StatelessWidget {
  const CounterView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopedDependyConsumer(
      builder: (context, scope) {
        return FutureBuilder(
          /// 这里我们正在观察 [CounterService] 并重建最新的计数值。
          future: scope.watchDependy<CounterService>(),
          builder: (context, snapshot) {
            final counterService = snapshot.data;

            // [LoggerService] 在这个例子中位于两个作用域之上。
            scope.dependy<LoggerService>().then(
              (value) => value.log("CounterView build"),
            );

            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${counterService?.counter}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            );
          },
        );
      },
    );
  }
}