Flutter数据流监听插件listenable_stream的使用

listenable_stream 插件允许开发者将Flutter中的 Listenable（例如 ChangeNotifier）和 ValueListenable（例如 ValueNotifier）转换为 Stream 和 ValueStream。这使得我们可以更方便地在Flutter应用中进行响应式编程。

主要特性

• 将 Listenable 转换为 Stream<Listenable>
• 将 ValueListenable<T> 转换为 ValueStream<T>，包括"replay"和"not replay"两种模式

依赖库状态

使用方法

Listenable.toStream()

将 Listenable 类型的对象转换为 Stream<Listenable>：

final ChangeNotifier changeNotifier = ChangeNotifier();
final Stream<ChangeNotifier> stream = changeNotifier.toStream();

stream.listen((event) {
  print(event); // 打印 'Instance of 'ChangeNotifier''
});

changeNotifier.notifyListeners();
changeNotifier.notifyListeners();

ValueListenable.toValueStream()

将 ValueListenable<T> 类型的对象转换为 ValueStream<T>：

final ValueNotifier<int> valueNotifier = ValueNotifier(0);
final ValueListenableStream<int> stream = valueNotifier.toValueStream();

stream.listen((value) {
  print(value); // 打印 1, 2
});

valueNotifier.value = 1;
valueNotifier.value = 2;

print(stream.value); // 打印 2

ValueListenable.toValueStream(replayValue: true)

当设置 replayValue: true 时，新订阅者会立即收到当前值：

final ValueNotifier<int> valueNotifier = ValueNotifier(0);
final ValueListenableStream<int> stream = valueNotifier.toValueStream(replayValue: true);

stream.listen((value) {
  print(value); // 打印 0, 1, 2
});

valueNotifier.value = 1;
valueNotifier.value = 2;

print(stream.value); // 打印 2

注意事项

• 返回的所有 Stream 都是单订阅的，并且不会发出错误。
• ValueListenableStream 始终包含有效值（即没有错误）。

示例代码

以下是一个完整的示例，演示了如何使用 listenable_stream 在Flutter应用程序中实现文本输入框的实时搜索功能：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:listenable_stream/listenable_stream.dart';
import 'package:rxdart_ext/state_stream.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'listenable_stream example',
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('listenable_stream example'),
      ),
      body: Center(
        child: ElevatedButton.icon(
          label: const Text('GO'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const MainPage()),
            );
          },
          icon: const Icon(Icons.home),
        ),
      ),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> with DisposeBagMixin {
  final controller = TextEditingController();
  late final StateStream<String> stateStream;

  @override
  void initState() {
    super.initState();

    stateStream = controller
        .toValueStream(replayValue: true)
        .map((event) => event.text)
        .debounceTime(const Duration(milliseconds: 500))
        .where((s) => s.isNotEmpty)
        .distinct()
        .switchMap((value) => Stream.periodic(
            const Duration(milliseconds: 500), (i) => '$value..$i'))
        .publishState('initial')
      ..connect().disposedBy(bag);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextField(
              controller: controller,
              decoration: const InputDecoration(filled: true),
            ),
            Expanded(
              child: StreamBuilder<String>(
                stream: stateStream,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Center(
                      child: Text(
                        snapshot.data!,
                        style: Theme.of(context).textTheme.titleMedium,
                      ),
                    );
                  } else {
                    return const Center(child: CircularProgressIndicator());
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这个例子展示了如何使用 listenable_stream 来监听 TextEditingController 的变化，并通过 StreamBuilder 实现一个简单的实时搜索功能。每当用户输入内容时，经过一定的延迟后，更新界面上显示的结果。