Flutter插件mini_tea_flutter的使用

Flutter插件mini_tea_flutter的使用

Mini TEA for Flutter

⚠️ 此插件正在积极开发中，可能会（并且很可能）在未来发生变化。

此插件包含用于 Mini TEA 的小部件。

通过这些小部件，您可以轻松地将 Mini TEA 集成到您的 Flutter 应用程序中。

了解有关 Mini TEA 的更多信息 在这里。

⚠️ 目前此插件只是从 flutter_bloc 复制粘贴过来的。 因为我们非常喜欢 bloc 如何与 Flutter 集成。

使用方法

如果您曾经使用过 Bloc，那么您将不会有任何疑问如何使用这些小部件。

我们非常喜欢 flutter_bloc 包所提供的简洁性和优雅性，因此在许多方面这里是对我们的架构的复制粘贴解决方案。

Provider

您可以使用 FeatureProvider 来创建并提供一个 Feature 实例。

typedef CounterFeature = Feature<CounterState, CounterMsg, CounterEffect>;

class CounterApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FeatureProvider.create(
          create: (context) => CounterFeature(),
          child: CounterPage(),
      ),
    );
  }
}

之后，您可以从 widget 树中获取它：

// 只读取
final feature = FeatureProvider.of<CounterFeature>(context);
final sameFeature = context.read<CounterFeature>();

// 或者监听
final feature = FeatureProvider.watch<CounterFeature>(context, listen: true);
final sameFeature = context.watch<CounterFeature>();

Listener

您可以使用 FeatureListener 来监听一个 Feature 实例。

class CounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return FeatureListener<CounterFeature, CounterState>(
      listener: (context, state) => print(state),
      child: CounterWidget(),
    );
  }
}

Builder

您可以使用 FeatureBuilder 来基于 Feature 实例构建一个 widget。

class CounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return FeatureBuilder<CounterFeature, CounterState>(
      builder: (context, state) => CounterWidget(state.value),
    );
  }
}

Effect Listener (单次事件)

某些事件必须只发生一次，例如显示一个 Snackbar。

为了处理这种情况，您可以使用 Effects 树来分离 UI 效果和其他效果。

// 我们的主要效果类，将在我们的功能中使用
sealed class Effect {}

// 所有 UI 效果的父类
// 从另一个密封类派生的密封类
sealed class UiEffect implements Effect {}

final class ShowSnackbar implements UiEffect {
  final String message;
  
  const ShowSnackbar(this.message);
}

// 所有异步效果的父类
// 同样是从另一个密封类派生的密封类
sealed class AsyncEffect implements Effect {}

final class LoginEffect implements AsyncEffect {
  final String email;
  final String password;
  
  const LoginEffect(this.email, this.password);
}

之后，您可以在 UI 中监听 UiEffect。

class CounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return FeatureEffectListener<CounterFeature, Effect, UiEffect>(
      listener: (context, effect) => ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(effect.message)),
      ),
      child: CounterWidget(),
    );
  }
}