Flutter数据流汇总插件stream_summary_builder的使用

Flutter数据流汇总插件stream_summary_builder的使用

stream_summary_builder 是一个实现了 StreamBuilderBase 的插件，它将新的数据流事件折叠到一个摘要中，并构建一个包含迄今为止所有数据流事件摘要的界面。如果您需要一个表示迄今为止所有数据流事件摘要的部件而不是仅仅最新的元素，则应使用此部件。一个常见的用例是使用异步从分页数据库查询中获取元素来构建一个 ListView。

• T 是数据流事件的类型。
• S 是交互摘要的类型。摘要被包裹在 AsyncSnapshot 中，以便构建器可以访问 ConnectionState。

参考

• StreamBuilder，专门用于仅需要最近一次交互的场景。
• StreamBuilderBase，一个抽象类，允许对摘要和连接状态行为进行更大的定制。

欢迎为该包做出任何贡献。

开始使用

查看 example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:example/delayed_text.dart';
import 'package:stream_summary_builder/stream_summary_builder.dart';

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

class MyApp extends StatefulWidget {
  // 这个部件是你的应用的根部件。
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late Stream<String> _cachedTextStream = delayedText();

  void _initStream() {
    _cachedTextStream = delayedText();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stream Summary Builder Demo',
      home: SafeArea(
        child: Scaffold(
          body: StreamSummaryBuilder<String, String>(
              initialData: '',  // 初始数据
              fold: (summary, value) => summary + value,  // 将新的值添加到摘要中

              /// 模拟从异步源逐行接收文本
              stream: _cachedTextStream,  // 数据流
              builder: _displayTextSummary),  // 构建函数
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.refresh),  // 刷新按钮图标
            onPressed: () => setState(_initStream),  // 刷新数据流
          ),
        ),
      ),
    );
  }

  Widget _displayTextSummary(
      BuildContext context, AsyncSnapshot<String> snapshot) {
    return Align(
        child: Text(snapshot.data ?? ''), alignment: Alignment.topLeft);  // 显示摘要
  }
}

示例代码解释

1. 导入必要的库:

   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   import 'package:example/delayed_text.dart';
   import 'package:stream_summary_builder/stream_summary_builder.dart';
   

2. 定义主应用部件:

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

3. 定义应用状态管理部件:

   class MyApp extends StatefulWidget {
     [@override](/user/override)
     _MyAppState createState() => _MyAppState();
   }
   

4. 初始化并管理数据流:

   class _MyAppState extends State<MyApp> {
     late Stream<String> _cachedTextStream = delayedText();
   
     void _initStream() {
       _cachedTextStream = delayedText();
     }
   

5. 构建UI:

   [@override](/user/override)
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Stream Summary Builder Demo',
       home: SafeArea(
         child: Scaffold(
           body: StreamSummaryBuilder<String, String>(
               initialData: '',
               fold: (summary, value) => summary + value,
               stream: _cachedTextStream,
               builder: _displayTextSummary),
           floatingActionButton: FloatingActionButton(
             child: Icon(Icons.refresh),
             onPressed: () => setState(_initStream),
           ),
         ),
       ),
     );
   }
   

6. 构建摘要显示部件:

   Widget _displayTextSummary(
       BuildContext context, AsyncSnapshot<String> snapshot) {
     return Align(
         child: Text(snapshot.data ?? ''), alignment: Alignment.topLeft);
   }