Flutter通信插件antenna的使用

Flutter通信插件antenna的使用

特性

声明你的各种事件

你可以列出应用中将要发生的各种事件。

实现你的小型存储

你可以单独存储特定模型的当前状态。

拦截副作用

你应该在改变状态之前完成所有涉及副作用的工作。

在一定时间内保持你的存储和效果

你还可以指定你的存储和效果何时开始或停止监听事件。

入门指南

首先，在你的 pubspec.yaml 文件中添加 antenna 插件：

flutter pub add antenna

使用方法

声明你的各种事件

const increment = "increment";

实现你的小型存储

final counterStore = createStore<int>(({
  int state = 0,
  dynamic event,
}) {
  if (event == increment) {
    return state + 1;
  }

  if (event == decrement) {
    return state - 1;
  }

  if (event is SetNumber) {
    return event.value;
  }

  return state;
});

拦截副作用

void setRandomNumberEffect(dynamic event) {
  if (event == random) {
    final value = Random().nextInt(100);

    dispatch(SetNumber(value));
  }
}

在一定时间内保持你的存储和效果

final subscription = connect(counterStore);

final subscription = listen(setRandomNumberEffect);

使用Antenna管理器控制订阅的生命周期

class _MyCounterState extends State<MyCounter> with AntennaManager {
  [@override](/user/override)
  void initState() {
    $connect(counterStore);

    $listen(setRandomNumberEffect);

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StoreConsumer(
              store: counterStore,
              builder: (context, data) => Text(data.toString()),
            ),
            TextButton(
              onPressed: () => dispatch(increment),
              child: const Text("Increment"),
            ),
            TextButton(
              onPressed: () => dispatch(decrement),
              child: const Text("Decrement"),
            ),
            TextButton(
              onPressed: () => dispatch(random),
              child: const Text("Random"),
            ),
          ],
        ),
      ),
    );
  }
}

完整示例Demo

example/lib/main.dart

import 'dart:math';

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

// 定义事件
const increment = "increment";
const decrement = "decrement";
const random = "random";

// 定义存储
final counterStore = createStore<int>(({
  int state = 0,
  dynamic event,
}) {
  if (event == increment) {
    return state + 1;
  }

  if (event == decrement) {
    return state - 1;
  }

  if (event == random) {
    final value = Random().nextInt(100);
    dispatch(SetNumber(value));
    return state;
  }

  return state;
});

// 定义副作用
void setRandomNumberEffect(dynamic event) {
  if (event == random) {
    final value = Random().nextInt(100);

    dispatch(SetNumber(value));
  }
}

// 主界面
class MyCounter extends StatefulWidget {
  const MyCounter({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyCounter> createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> with AntennaManager {
  [@override](/user/override)
  void initState() {
    $connect(counterStore);
    $listen(setRandomNumberEffect);

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StoreConsumer(
              store: counterStore,
              builder: (context, data) => Text(data.toString()),
            ),
            TextButton(
              onPressed: () => dispatch(increment),
              child: const Text("Increment"),
            ),
            TextButton(
              onPressed: () => dispatch(decrement),
              child: const Text("Decrement"),
            ),
            TextButton(
              onPressed: () => dispatch(random),
              child: const Text("Random"),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(const MaterialApp(home: MyCounter()));