Flutter流式数据构建插件sliver_stream_builder的使用

sliver_stream_builder 是一个用于将数据流（stream）转换为 SliverList 或 SliverGrid 的插件。它还提供了一个辅助函数来从下一个函数创建流。

使用

简单用法示例

CustomScrollView(
  slivers: [
    SliverStreamBuilder<NewsModel>(
      stream: NewsNetwork.getNews(), // 数据流
      builder: (ctx, item) => NewsItem(news: item), // 构建器
    )
  ],
);

在这个例子中，我们使用 SliverStreamBuilder 将来自 NewsNetwork.getNews() 的数据流转换为 SliverList，并使用 NewsItem 构建每个新闻项。

自定义 Sliver 构建器

CustomScrollView(
  slivers: [
    SliverStreamBuilder<String>(
      stream: ImageNetwork.getImages(), // 图片数据流
      sliverBuilder: (context, delegate) => SliverGrid(
        delegate: delegate, // 委托
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 150, // 每个项目的最大交叉轴尺寸
        ),
      ),
      itemBuilder: (ctx, url) => CachedNetworkImage(imageUrl: url), // 构建每个图片项
    ),
  ],
);

在这个例子中，我们将图片数据流转换为 SliverGrid，每个项目使用 CachedNetworkImage 显示图片。

包含空构建器

CustomScrollView(
  slivers: [
    SliverStreamBuilder<NewsModel>(
      stream: NewsNetwork.getNews(), // 数据流
      builder: (ctx, item) => NewsItem(news: item), // 构建器
      // 当流完成且未发出任何元素时显示
      emptyBuilder: (_) => Center(child: Text('Nothing new here :(')), 
    )
  ],
);

在这个例子中，如果流完成且没有发出任何元素，将会显示一个提示用户“没有新消息”的中心文本。

从下一个函数创建流

dataStreamWrapper 方法

// 手动管理状态
Stream<NewsModel> getNews() {
  int page = 0;
  return dataStreamWrapper(() async {
    final ans = await dio.get('/news', queryParameters: {'page': page});
    final data = (ans.data as List).map((e) => NewsModel.fromJson(e)).toList();
    if (data.isEmpty) return null;
    // 只在这里增加页码以允许重新获取相同的数据，如果抛出异常
    // 此函数内部的所有错误都会被捕获并添加到流中
    page += 1;
    return data;
  });
}

dataStreamWrapper 函数负责管理流控制器，并将下一个函数转换为流。它实现了暂停、恢复逻辑以及错误处理。

dataStreamHelper 方法

// 更安全的方法来创建数据流，因为它防止了一些误用
Stream<NewsModel> getNews() {
  return dataStreamHelper.state(0).next((it) async {
    final ans = await dio.get('/news', queryParameters: {'page': it.current});
    final data = (ans.data as List).map((e) => NewsModel.fromJson(e)).toList();
    if (data.isEmpty) return it.done(); // 如果数据为空，则表示完成
    return it.next(
      data, 
      it.current + 1, // 下一个状态
    );
  });
}

dataStreamHelper 是一个更安全的方法来创建数据流，因为它可以防止一些误用。

示例代码

以下是从 GitHub 获取的示例代码：

import 'package:examples/data_stream.dart';
import 'package:examples/empty.dart';
import 'package:examples/images_grid.dart';
import 'package:examples/simple.dart';
import 'package:flutter/material.dart';

import 'error.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(title: const Text('SliverStreamBuilder example')),
          body: ListView(
            children: [
              ListTile(
                title: const Text('Grid sliver'),
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const ImagesGrid()),
                ),
              ),
              ListTile(
                title: const Text('Empty'),
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const EmptyStream()),
                ),
              ),
              ListTile(
                title: const Text('Simple list'),
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const SimpleSliver()),
                ),
              ),
              ListTile(
                title: const Text('Data Stream example'),
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => const DataStreamExample(),
                  ),
                ),
              ),
              ListTile(
                title: const Text('Data Stream error example'),
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => const SliverStreamErrorExample(),
                  ),
                ),
              ),
            ],
          ),
        );
      }),
    );
  }
}