Flutter数据流管理插件streams_provider的使用

它提供了一种优雅且有效的方式来在Provider中使用流。

Streams Widgets

StreamsProvider 是一个Flutter小部件，通过Provider.of<T>(context)为它的子组件提供一个provider。它被用作依赖注入（DI）小部件，因此可以在子树中的多个小部件中提供单个provider实例。

在大多数情况下，应该使用StreamsProvider来创建一个新的provider，该provider将对子树的其余部分可用。在这种情况下，由于StreamsProvider负责创建provider，它会自动处理关闭provider的操作。

StreamsProvider(
  create: (BuildContext context) => CounterProvider(),
  child: CounterPage(),
);

在某些情况下，StreamsProvider可以用来为新的widget树部分提供现有的provider。这种情况最常见于当现有的provider需要在新路由中可用时。在这种情况下，StreamsProvider不会自动关闭provider，因为它不是创建者。

StreamsProvider.value(
  value: StreamsProvider.of<CounterProvider>(context),
  child: SomeOtherPage(),
);

然后从CounterPage或SomeOtherPage中，我们可以使用以下方式获取CounterProvider：

// 使用扩展方法
context.provider<CounterProvider>();

// 不使用扩展方法
StreamsProvider.of<CounterProvider>(context)

StreamsSelector 是一个Flutter小部件，它从provider中选择流，并在选择器流发出信号时调用构建器。

StreamsSelector<CounterProvider, int>(
  selector: (context, provider) {
     // 从CounterProvider中选择流
     return provider.counter;
  },
  builder: (context, count, child) {
    // 返回基于选择器流发出信号的小部件
    return Center(
      child: Text(
        '$count',
        style: TextStyle(fontSize: 24.0),
      ),
    );
  },
)

StreamsListener 是一个Flutter小部件，它接受一个StreamsWidgetListener和一个选择器，并在选择器的信号发出时调用监听器。它用于需要在每次信号发出时执行的功能，例如导航、显示SnackBar、显示Dialog等…监听器仅在每次信号发出时调用一次。

StreamsListener<CounterProvider, int>(
  selector: (context, provider) {
     // 从CounterProvider中选择流
     return provider.counter;
  },
  listener: (context, count) {
    // 基于数据更改执行操作
    if (count == 10) {
      // 显示SnackBar或其他功能
    }
  },
  child: Container(),
)

Usage

让我们看看如何使用StreamsSelector将一个CounterPage小部件与CounterProvider连接起来。

counter_provider.dart

class CounterProvider implements StreamsProvidable {
  final _counter = MutableValueStream<int>(0);
  ValueStream<int> counter => _counter;

  void incrementCounter() {
    _counter.value++;
  }

  void decrementCounter() {
    _counter.value--;
  }
}

counter_page.dart

class CounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final CounterProvider counterProvider = context.provider<CounterProvider>();

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: StreamsSelector<CounterProvider, int>(
        selector: (context, provider) => provider.counter,
        builder: (context, count, child) {
          return Center(
            child: Text(
              '$count',
              style: TextStyle(fontSize: 24.0),
            ),
          );
        },
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                counterProvider.incrementCounter();
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () {
                counterProvider.decrementCounter();
              },
            ),
          ),
        ],
      ),
    );
  }
}