Flutter StreamBuilder 实现局部刷新 Widget

柔光的暖阳◎ 2023-10-07 16:34 67阅读 0赞

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

*  [Flutter 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢][github]
 *  [系列学习教程在这里][Link 2]

Stream 就是事件流或者管道，是基于事件流驱动设计代码，然后监听订阅事件，并针对事件变换处理响应。

Stream 分单订阅流和广播流,单订阅流在发送完成事件之前只允许设置一个监听器，并且只有在流上设置监听器后才开始产生事件，取消监听器后将停止发送事件.

核心使用代码为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]

本页面实现 Demo 效果如下

![在这里插入图片描述][20210613001505545.gif_pic_center]

程序入口

main() {
        
      runApp(MaterialApp(
        //不显示 debug标签
        debugShowCheckedModeBanner: false,
        //显示的首页面
        home: DemoStreamBuilder(),
      ));
    }

DemoStreamBuilder 主页面

///代码清单
    class DemoStreamBuilder extends StatefulWidget {
        
      @override
      _DemoStreamBuilderState createState() => _DemoStreamBuilderState();
    }
    
    class _DemoStreamBuilderState extends State<DemoStreamBuilder> {
        
    
      int _count = 0;
      //流Stream 控制器
      StreamController<int> _streamController = StreamController();
    
      @override
      void dispose() {
        
        //销毁
        _streamController.close();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        
        //
        return Scaffold(
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
        
              _count++;
              //发送消息
              _streamController.add(_count);
            },
          ),
          appBar: AppBar(
            title: Text("StreamBuilder"),
          ),
          body: Container(
            padding: EdgeInsets.all(30),
            child: Column(
              children: [
                //接收消息
                StreamBuilder<int>(
                  //初始值
                  initialData: _count,
                  //绑定Stream
                  stream: _streamController.stream,
                  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        
                    return Text("测试使用 ${snapshot.data}");
                  },
                ),
    
                Text("测试使用"),
                Text("测试使用"),
              ],
            ),
          ),
        );
      }
    }

本文章 就是通过 StreamBuilder 来实现了刷新 Widget 的功能。

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210613001102864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center
[20210613001505545.gif_pic_center]: https://img-blog.csdnimg.cn/20210613001505545.gif#pic_center