• flutter开发实战-StreamBuilder使用介绍及实例

    flutter开发实战-StreamBuilder使用介绍及实例

    StreamBuilder是一个Widget，它依赖Stream来做异步数据获取刷新widget。

    一、Stream

    Stream是一种用于异步处理数据流的机制，它允许我们从一段发射一个事件，从另外一段去监听事件的变化.Stream类似于JavaScript中的Promise、Swift中的Future或Java中的RxJava，它们都是用来处理异步事件和数据的。Stream是一个抽象接口，我们可以通过StreamController接口可以方便使用Stream。

    • StreamController 流控制器

    通过StreamController，我们可以监听暂停、恢复、取消、完成、错误等事件

     final streamController = StreamController(
   onPause: () => print('Paused'),
   onResume: () => print('Resumed'),
   onCancel: () => print('Cancelled'),
   onListen: () => print('Listens'),
 );

 streamController.stream.listen(
   (event) => print('Event: $event'),
   onDone: () => print('Done'),
   onError: (error) => print(error),
 );

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • StreamSink 用作发射事件

    StreamSink可以通过streamController获取，streamController.sink。
    StreamSink发射事件调用add方法

    • Stream 用作事件的监听

    Stream 可以通过streamController获取，streamController.stream
    Stream 监听则可以调用listen方法

    • StreamSubscription 用作管理监听，关闭、暂停等

    streamSubscription 通过Stream调用listen获取。streamSubscription有暂停、恢复、关闭、取消等方法。

    二、Stream的使用

    Stream使用的步骤如下

      /// 获取StreamSubscription用作管理监听，关闭暂停等
  StreamSubscription? subscription;

  /// StreamController
  StreamController? streamController = StreamController();

  /// StreamSink用作发射事件
  StreamSink? get streamSink => streamController?.sink;

  /// 获取Stream用作事件监听
  Stream? get streamData => streamController?.stream;

  /// 使用subscription来监听事件
  subscription = streamData?.listen((event) {
    // TODO
    print("subscription listen event:${event}");
  });

  // 发射一个事件
  streamSink?.add(index);
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    Stream使用实例完整代码如下

    import 'dart:async';

import 'package:flutter/material.dart';

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

  @override
  State createState() => _SteamDemoPageState();
}

class _SteamDemoPageState extends State {
  int index = 0;
  int listenData = 0;

  /// 获取StreamSubscription用作管理监听，关闭暂停等
  StreamSubscription? subscription;

  /// StreamController
  StreamController? streamController = StreamController();

  /// StreamSink用作发射事件
  StreamSink? get streamSink => streamController?.sink;

  /// 获取Stream用作事件监听
  Stream? get streamData => streamController?.stream;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    streamController = StreamController();

    /// 使用subscription来监听事件
    subscription = streamData?.listen((event) {
      // TODO
      print("subscription listen event:${event}");
      setState(() {
        listenData = event;
      });
    });

    // 发射一个事件
    streamSink?.add(index);
    index++;
  }

  void testStream(BuildContext context) {
    // 发射一个事件
    streamSink?.add(index);
    index++;
    print("index -- ${index}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HeroPage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              '监听的listenData：${listenData}',
              style: TextStyle(
                fontSize: 16,
                color: Colors.black87,
              ),
            ),
            SizedBox(height: 30,),
            TextButton(
              onPressed: () {
                testStream(context);
              },
              child: Container(
                height: 46,
                width: 150,
                color: Colors.lightBlue,
                alignment: Alignment.center,
                child: Text(
                  '测试Stream',
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98

    最后可以看到效果图，当点击按钮时候，监听的数值更新。
    在这里插入图片描述

    三、StreamBuilder

    既然使用了Stream，我们可以StreamBuilder。如果我们再使用setState来刷新，则没有必要使用Stream了。

    StreamBuilder是Flutter框架中的一个内置小部件，它可以监测数据流（Stream）中数据的变化，并在数据发生变化时重新构建小部件树。

    在StreamBuilder中，当数据流发生变化，Flutter框架会自动传递一个AsyncSnapshot，AsyncSnapshot对象包含Stream中的最新数据以及其他有关数据流信息，如是否处理链接状态、错误信息等。

    StreamBuilder(
              stream: streamData,
              builder: (BuildContext ctx, AsyncSnapshot snapshot) {
                if (!snapshot.hasData) {
                  return Text("没有数据");
                } else {
                  return Text(
                         '监听的listenData：${snapshot.data}',
                         style: TextStyle(
                           fontSize: 16,
                           color: Colors.black87,
                         ),
                       );
                }
              },
            ),
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    StreamBuilder的构造方法如下

    const StreamBuilder({
    super.key,
    this.initialData,
    super.stream,
    required this.builder,
  }) : assert(builder != null);
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • initialData : 默认初始化数据
    • stream : stream事件流对象
    • builder : 负责根据不同状态创建对应ui的方法实现

    StreamBuilder中的其他方法

    • afterConnected:返回一个AsyncSnapshot，当订阅了stream时会回调此AsyncSnapshot
    • afterData:返回一个AsyncSnapshot，当stream有事件触发时会回调此AsyncSnapshot
    • afterDisconnected:返回一个AsyncSnapshot，当取消订阅stream时会回调此AsyncSnapshot
    • afterDone:返回一个AsyncSnapshot，当stream被关闭时会回调此AsyncSnapshot
    • afterError:返回一个AsyncSnapshot，stream发生错误时会回调此AsyncSnapshot

    四、使用StreamBuilder示例

    在上面的示例中，我们可以将Text这个Widget通过StreamBuilder来包裹一下。
    代码如下

    StreamBuilder(
              stream: streamData,
              builder: (BuildContext ctx, AsyncSnapshot snapshot) {
                if (!snapshot.hasData) {
                  return Text("没有数据");
                } else {
                  return Text(
                         '监听的listenData：${snapshot.data}',
                         style: TextStyle(
                           fontSize: 16,
                           color: Colors.black87,
                         ),
                       );
                }
              },
            ),
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    这里可以将示例中的StreamSubscription移除，暂时用不到了，可以找到StreamBuilder继承的StreamBuilderBase中已经创建了StreamSubscription，并且_subscribe

    /// State for [StreamBuilderBase].
class _StreamBuilderBaseState extends State> {
  StreamSubscription? _subscription; // ignore: cancel_subscriptions
  late S _summary;

....

void _subscribe() {
    if (widget.stream != null) {
      _subscription = widget.stream!.listen((T data) {
        setState(() {
          _summary = widget.afterData(_summary, data);
        });
      }, onError: (Object error, StackTrace stackTrace) {
        setState(() {
          _summary = widget.afterError(_summary, error, stackTrace);
        });
      }, onDone: () {
        setState(() {
          _summary = widget.afterDone(_summary);
        });
      });
      _summary = widget.afterConnected(_summary);
    }
  }

  void _unsubscribe() {
    if (_subscription != null) {
      _subscription!.cancel();
      _subscription = null;
    }
  }

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    使用StreamBuilder完整示例代码如下

    import 'dart:async';

import 'package:flutter/material.dart';

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

  @override
  State createState() => _SteamDemoPageState();
}

class _SteamDemoPageState extends State {
  int index = 0;
  int listenData = 0;

  /// 获取StreamSubscription用作管理监听，关闭暂停等
  // StreamSubscription? subscription;

  /// StreamController
  StreamController? streamController = StreamController();

  /// StreamSink用作发射事件
  StreamSink? get streamSink => streamController?.sink;

  /// 获取Stream用作事件监听
  Stream? get streamData => streamController?.stream;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    streamController = StreamController();

    /// 使用subscription来监听事件
    // subscription = streamData?.listen((event) {
    //   // TODO
    //   print("subscription listen event:${event}");
    //   setState(() {
    //     listenData = event;
    //   });
    // });

    // 发射一个事件
    streamSink?.add(index);
    index++;
  }

  void testStream(BuildContext context) {
    // 发射一个事件
    streamSink?.add(index);
    index++;
    print("index -- ${index}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HeroPage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            StreamBuilder(
              stream: streamData,
              builder: (BuildContext ctx, AsyncSnapshot snapshot) {
                if (!snapshot.hasData) {
                  return Text("没有数据");
                } else {
                  return Text(
                         '监听的listenData：${snapshot.data}',
                         style: TextStyle(
                           fontSize: 16,
                           color: Colors.black87,
                         ),
                       );
                }
              },
            ),
            SizedBox(
              height: 30,
            ),
            TextButton(
              onPressed: () {
                testStream(context);
              },
              child: Container(
                height: 46,
                width: 150,
                color: Colors.lightBlue,
                alignment: Alignment.center,
                child: Text(
                  '测试Stream',
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110

    https://brucegwo.blog.csdn.net/article/details/136232000

    五、小结

    flutter开发实战-StreamBuilder使用介绍及实例。

    学习记录，每天不停进步。

  • 相关阅读:
    Java程序员不满自身现状，是如何在三年内一步步进入BAT拿高薪？
    java基础
    经纬恒润AUTOSAR全面适配芯驰车规芯片，联合打造全场景国产解决方案
    day17正则表达式作业
    5.前后端不分离项目的部署
    Android 13.0 recovery出厂时清理中字体大小的修改
    Python PyQt5开发——QLineEdit文字输入框的使用方法和代码示例
    Google Earth Engine——全球陆地冰层空间数据的介绍（内含常见错误）
    【C++】匿名对象 ③ ( 函数返回值为对象值时 匿名对象 的 拷贝构造函数 与 析构函数 调用情况分析 )
    记录一次数据库变更失败
  • 原文地址：https://blog.csdn.net/gloryFlow/article/details/136232000