Flutter实时数据流处理插件reactive_live_stream的使用

直观介绍

reactive_live_stream 是一个轻量级但功能强大的库，用于将应用状态与业务逻辑绑定在一起。

快速入门

让我们看看如何使用 LiveStreamProvider 提供一个 CounterLiveStream 到 CounterPage，并通过 LiveStreamBuilder 来响应状态变化。

示例代码

class CounterLiveStream extends LiveStream {
  [@override](/user/override)
  void init() {
    // 注册你的状态
    registerProperty<int>(
        #counter,
        BindableProperty.$value<int>(
          initial: 0,
        ));
  }

  void increment() => updateValue<int>(#counter, (old) => old! + 1);

  void decrement() => updateValue<int>(#counter, (old) => old! - 1);
}

注册状态

// 声明你的键
registerProperty<int>(
    #counter,
    BindableProperty.$value<int>(
      initial: 0,
    ));

main.dart

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Live Stream Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(),
    );
  }
}

counter_page.dart

final liveStream = CounterLiveStream();

class CounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LiveStreamProvider<CounterLiveStream>(
      create: liveStream,
      child: Scaffold(
        appBar: AppBar(title: const Text('Live Stream Counter')),
        body: Center(child: const CounterText()),
        floatingActionButton: FloatingButton(),
      ),
    );
  }
}

LiveStreamBuilder

LiveStreamBuilder 是一个 Flutter 小部件，它需要一个键和一个构建器函数。LiveStreamBuilder 负责在状态发生变化时重新构建小部件。LiveStreamBuilder 与 StreamBuilder 类似，但它具有更简单的 API，以减少所需的样板代码。构建器函数可能会被多次调用，并且应该是一个纯函数，根据状态返回一个小部件。

[@override](/user/override)
Widget build(BuildContext context) =>
    LiveStreamBuilder<CounterLiveStream, int>(
      propertyKey: #counter,
      builder: (context, ValueListenable state) {
        return Center(
          child: Text('${state.value}'),
        );
      },
    );

LiveStreamListener

LiveStreamListener 是一个 Flutter 小部件，它接受一个 LiveStreamWidgetListener 和一个可选的 liveStream，并在 liveStream 的状态发生变化时调用监听器。它可以用于需要在每次状态变化时执行的功能，例如导航、显示 SnackBar、显示 Dialog 等。

[@override](/user/override)
Widget build(BuildContext context) {
  return LiveStreamProvider<LiveStream>(
    create: liveStream,
    child: Scaffold(
        appBar: AppBar(),
        body: LiveStreamListener<LoginLiveStream, State>(
          listener: (context, ValueListenable state) {
            print("state");
          },
          propertyKey: #api,
          child: Column(
            children: const [
              SizedBox(
                height: 30,
              ),
            ],
          ),
        )),
  );
}

LiveStreamProvider

LiveStreamProvider 是一个 Flutter 小部件，它通过 LiveStreamProvider.of 为它的子组件提供一个 liveStream。

[@override](/user/override)
Widget build(BuildContext context) {
  return LiveStreamProvider<LiveStream>(
    create: liveStream,
    child: ChildA()
  );
}

MultiLiveStreamListener

MultiLiveStreamListener 是一个 Flutter 小部件，它将多个 LiveStreamListener 小部件合并成一个。MultiLiveStreamListener 提高了可读性并消除了嵌套多个 LiveStreamListener 的需求。

MultiLiveStreamProvider

MultiLiveStreamProvider 是一个 Flutter 小部件，它将多个 LiveStreamProvider 小部件合并成一个。MultiLiveStreamProvider 提高了可读性并消除了嵌套多个 LiveStreamProvider 的需求。

参考代码

import 'package:flutter/material.dart';
import 'package:reactive_live_stream/live_stream.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Live Stream Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(),
    );
  }
}

class CounterLiveStream extends LiveStream {
  [@override](/user/override)
  void init() {
    registerProperty<int>(
        #counter,
        BindableProperty.$value<int>(
          initial: 0,
        ));
  }

  void increment() => updateValue<int>(#counter, (old) => old! + 1);

  void decrement() => updateValue<int>(#counter, (old) => old! - 1);
}

final liveStream = CounterLiveStream();

class CounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LiveStreamProvider<CounterLiveStream>(
      create: liveStream,
      child: Scaffold(
        appBar: AppBar(title: const Text('Live Stream Counter')),
        body: Center(child: const CounterText()),
        floatingActionButton: FloatingButton(),
      ),
    );
  }
}

class FloatingButton extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // TODO: 实现 build 方法
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 4.0),
          child: FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () {
              LiveStreamProvider.of<CounterLiveStream>(context).increment();
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 4.0),
          child: FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () {
              LiveStreamProvider.of<CounterLiveStream>(context).decrement();
            },
          ),
        ),
      ],
    );
  }
}

class CounterText extends StatelessWidget {
  const CounterText({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) =>
      LiveStreamBuilder<CounterLiveStream, int>(
        propertyKey: #counter,
        builder: (context, ValueListenable state) {
          return Center(
            child: Text('${state.value}'),
          );
        },
      );
}