Flutter插件vessel_flutter的使用_vessel是一个用于依赖注入（Dependency Injection）的库

Flutter插件vessel_flutter的使用_vessel是一个用于依赖注入（Dependency Injection）的库

vessel 是一个用于依赖注入（Dependency Injection）的库。在 Flutter 中使用 vessel_flutter 可以帮助我们更好地管理应用中的状态和依赖关系。

开始使用vessel_flutter

首先，你需要将你的应用包装在一个 ProviderScope 小部件中：

void main() {
  runApp(
    ProviderScope(child: App())
  );
}

然后，你可以通过 of 扩展方法来读取你的提供商：

GestureDetector(
  onTap: () => myProvider.of(context).doSomething(),
  child: ...,
);

每个 ProviderScope 都会引入一个新的 ProviderContainer，该容器将成为前一个容器的子容器。当 ProviderScope 小部件被释放时，它也会释放相应的 ProviderContainer。

覆盖和作用域

你可以用另一个提供商覆盖当前提供商：

ProviderScope(
  overrides: [
    myProvider.overrideWith(anotherProvider),
  ],
  child: ...,
)

或者只是对提供商进行作用域限定：

ProviderScope(
  overrides: [
    myProvider.scope(),
  ],
  child: ...,
)

传递父级

ProviderScope 会从 BuildContext 中获取其父级。但你可以通过 parent 构造函数参数来覆盖它。这在处理对话框时非常有用：

ProviderScope(
  overrides: [myVmProvider.scoped()],
  child: Builder(
    builder: (context) => GestureDetector(
      onTap: () {
        final container = UncontrolledProviderScope.of(context);
        showAlertDialog(
          builder: (context) => ProviderScope(
            parent: container,
            child: ...,
          ),
        );
      },
      child: ...,
    ),
  ),
)

这样，你的对话框就会接收来自父屏幕的所有作用域提供商。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 vessel_flutter 插件来管理状态和依赖关系。

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

// 定义一个提供商
final provider = Provider((read) => ValueNotifier(0));

void main() {
  // 应用程序入口
  runApp(
    ProviderScope(
      adapters: [ValueNotifierAdapter()],
      child: provider.builder(
        builder: (_, value, __) => Text("$value"),
      ),
    ),
  );
}

// 自定义适配器
class ValueNotifierAdapter extends ProviderAdapter<ValueNotifier> {
  [@override](/user/override)
  void dispose(ValueNotifier providerValue) {
    // 在适配器中释放资源
    providerValue.dispose();
  }
}

// 扩展 ProviderBase 类，添加 builder 方法
extension<T> on ProviderBase<ValueNotifier<T>> {
  Widget builder({required ValueWidgetBuilder<T> builder}) =>
      _ValueNotifierProviderBuilder(
        provider: this,
        builder: builder,
      );
}

// 自定义小部件
class _ValueNotifierProviderBuilder<T> extends StatelessWidget {
  final ProviderBase<ValueNotifier<T>> provider;
  final ValueWidgetBuilder<T> builder;
  final Widget? child;

  const _ValueNotifierProviderBuilder({
    super.key,
    required this.builder,
    required this.provider,
    this.child,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 ValueListenableBuilder 来监听 ValueNotifier 的变化
    return ValueListenableBuilder(
      valueListenable: provider.of(context),
      builder: builder,
      child: child,
    );
  }
}