Flutter StreamBuilder 实现局部刷新 Widget

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

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

核心使用代码为:


本页面实现 Demo 效果如下

程序入口

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();@overridevoid dispose() {//销毁_streamController.close();super.dispose();}@overrideWidget 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,//绑定Streamstream: _streamController.stream,builder: (BuildContext context, AsyncSnapshot<int> snapshot) {return Text("测试使用 ${snapshot.data}");},),Text("测试使用"),Text("测试使用"),],),),);}
}

Flutter StatefulBuilder 用来实现局部数据刷新

1 作用描述
用来实现局部数据刷新的功能,官网描述如下:

  • A platonic widget that both has state and calls a closure to obtain its child widget. 一个柏拉图式的小部件,它既有状态,又调用一个闭包来获取它的子小部件。
  • The StateSetter function passed to the builder is used to invoke a rebuild instead of a typical State’s State.setState.传递给构建器的StateSetter函数用于调用重构,而不是典型的State的State. setstate。
  • Since the builder is re-invoked when the StateSetter is called, any variables that represents state should be kept outside the builder function.由于在调用StateSetter时将重新调用构建器,所以表示状态的任何变量都应该保留在构建器函数之外。

2 基本使用核心代码

class DemoStatefulBuilderPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(//状态构建器body: buildStatefulBuilder(),);}
}
int _count = 0;StatefulBuilder buildStatefulBuilder() {return StatefulBuilder(//构建状态改变的Widgetbuilder: (BuildContext context, void Function(void Function()) setState) {//居中return Center(//手势识别child: GestureDetector(child: Text("早起的年轻人 $_count"),//单击事件onTap: () {//刷新当前  StatefulBuilder 中的状态setState(() {_count++;});},),);},);}

Flutter 实现局部刷新

当widget需要进行刷新时,我们可以通过调用widget的setState方法来实现,setState随后会调用State的build方法来进行重建

//请求刷新setState((){});#State<T extends StatefulWidget>@overrideWidget build(BuildContext context) {//构建新的Widgetreturn new Text(_text);}

那么,如果 我们能将 build方法中的 return new Text(_text) 暴漏出去,我们就可以实现通用的 局部刷新 Widget。

实现方案


1. 接口回调,将return new Text(_text);暴露出去:
用typedef function实现

//定义函数别名typedef BuildWidget = Widget Function();

将函数别名 BuildWidget 作为参数,传递到State.build方法即可

完整代码

import 'package:flutter/material.dart';//封装 通用局部刷新工具类
//定义函数别名
typedef BuildWidget = Widget Function();class PartRefreshWidget extends StatefulWidget {PartRefreshWidget(Key key, this._child): super(key: key);BuildWidget _child;@overrideState<StatefulWidget> createState() {return PartRefreshWidgetState(_child);}}class PartRefreshWidgetState extends State<PartRefreshWidget> {BuildWidget child;PartRefreshWidgetState(this.child);@overrideWidget build(BuildContext context) {return child.call();}void update() {print('update');setState(() {});}}

使用:

import 'package:flutter/material.dart';import 'PartRefreshWidget.dart';class GlobalKeyDemo extends StatefulWidget {@override_GlobalKeyDemoState createState() => _GlobalKeyDemoState();
}class _GlobalKeyDemoState extends State<GlobalKeyDemo> {int _count = 0;//使用1 创建GlobalKeyGlobalKey<PartRefreshWidgetState> globalKey = new GlobalKey();@overrideWidget build(BuildContext context) {print('----------------build');return Scaffold(appBar: AppBar(title: Text("inheritedWidget"),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[//使用2 创建通用局部刷新widgetPartRefreshWidget(globalKey, () {///创建需要局部刷新的widgetreturn Text('变化的:$_count',style: TextStyle(color: Colors.green),);}),Text('不变的: $_count'),RaisedButton(onPressed: () {//点击_count++;//使用3调用刷新方法globalKey.currentState.update();},),],),));}
}

效果如下图所示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/190226.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3D全景技术,为我们打开全新宣传领域

随着科技的发展&#xff0c;3D全景技术正在融入我们的生活&#xff0c;这种全新视觉体验方式为我们打开了一扇全新的宣传领域&#xff0c;可以让我们多方位、多视角地探索各个行业&#xff0c;无论是对教育、商业、还是其他领域&#xff0c;都产生了深远的影响。 3D全景技术结合…

【Github】git clone命令下载文件中途停止

方法一&#xff1a; 使用git clone命令下载github上的源代码时&#xff0c;有时文件下载到一定百分比时就停止不动&#xff0c; 这是因为我们所下载的文件很大&#xff0c;超过了git预先分配的Postbuffer容量&#xff0c;所以一直卡在那里。可以使用以下命令查看当前Postbuffe…

Kyligence Copilot 亮相第六届进博会,增添数智新活力

11月5日&#xff0c;第六届中国国际进口博览会&#xff08;以下简称“进博会”&#xff09;在上海国家会展中心盛大启幕&#xff0c;众多新科技、新成果、新展品亮相本届进博会。作为阿斯利康&#xff08;AstraZeneca&#xff09;合作伙伴&#xff0c;跬智信息&#xff08;Kyli…

【C++初阶】类与对象(三)

目录 一、再谈构造函数1.1 初始化列表1.1.1 初始化列表写法1.1.2 哪些成员要使用初始化列表 1.2 初始化列表的特点1.2.1 队列类问题解决1.2.2 声明顺序是初始化列表的顺序 1.3 explicit关键字1.3.1 explicit关键字的作用 二、static成员2.1 类的静态成员概念2.2 类里创建了多少…

List中的迭代器实现【C++】

List中的迭代器实现【C】 一. list的结构二. 迭代器的区别三. 迭代器的实现i. 类的设计ii. 重载iii. !重载iiii. begin()iiiii. end()iiiii. operator* 四.测试五. const迭代器的实现i. 实现5.2 优化实现 一. list的结构 其实按照习惯来说&#xff0c;应该要专门出一篇博客来写…

C语言精华题目锦集1

第一题 test.c文件中包括如下语句&#xff0c;文件中定义的四个变量中&#xff0c;是指针类型的是&#xff08;&#xff09;【多选】 #define INT_PTR int* typedef int* intptr; INT_PRT a,b; int_ptr c,d;A:a  B:b  C:c  D:d #define是宏定义&#xff0c;此时在程序中IN…

微信小程序:仅前端实现对象数组的模糊查询

效果 核心代码 //对数组进行过滤&#xff0c;返回数组中每一想满足name值包括变量query的 let result array.filter(item > { return item.name.includes(query); }); 完整代码 wxml <input type"text" placeholder"请输入名称" placeholder-styl…

ADFS 高可用配置 + NLB配置(Windows网络负载均衡)

ADFS 高可用配置 NLB配置&#xff08;Windows网络负载均衡&#xff09; ADFS安装配置NLB配置节点 TEST-ADFS-01 网络负载平衡配置节点 TEST-ADFS-02 网络负载平衡修改CRM配置 ADFS实现高可用负载均衡有两种&#xff0c;主要是在数据库的选择方式&#xff1a; windows自带的内…

如何安装Node.js? 创建Vue脚手架

1.进入Node.js官网&#xff0c;点击LTS版本进行下载 Node.js (nodejs.org)https://nodejs.org/en 2.然后一直【Next】即可 3.打开【cmd】,输入【node -v】注意node和-v中间的空格 查看已安装的Node.js的版本号&#xff0c;如果可以看到版本号&#xff0c;则安装成功 创建Vue脚手…

世微 升压恒压IC dc-dc转换器 充电器手持设备便携式产品 AP8660

AP8660是一款升压dc-dc转换器&#xff0c;内置MOS调节器&#xff0c;内部补偿&#xff0c;还可以最小6个外部组件&#xff0c;内部的软识启动功能可以降压涌入电流 AP8660 SOT23-6封装&#xff0c;可以为PCB提供节省空间 特点 可调输出&#xff0c;最高达到24W 内部固定PWM频…

leetcode-链表经典题

1.反转单链表 206. 反转链表https://leetcode.cn/problems/reverse-linked-list/这里我们使用创建一个变量cur来遍历原链表&#xff0c;再创建一个新节点newnode&#xff0c;首先使用一个循环来遍历原链表&#xff0c;cur为NULL是循环结束&#xff0c;每次进入循环将cur的下一…

2023数据结构期中测验-2023秋-计算机+未来网络专业

数据结构期中测验 选择题函数题6-1 求链式表的表长6-2 逆序数据建立链表6-3 删除单链表偶数节点6-4 求二叉树高度6-5 先序输出叶结点 为了防止不自觉的朝答案看去&#xff0c;特意用了明黄色字体&#xff0c;如下查看答案&#xff1a; 选择题 2-1 下述程序段的时间复杂度为&am…

Linux 部署Sentinel控制台

Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 1.版本选择 SpringCloudAlibaba SpringClo…

若依侧边栏添加计数标记效果

2023.11.13今天我学习了如何对若依的侧边栏添加技术标记的效果&#xff0c;如图&#xff1a; 我们需要用到两个页面&#xff1a; 先说子组件实现计数标记效果 1.item.vue <script> export default {name: MenuItem,functional: true,props: {icon: {type: String,defau…

深度学习 python opencv 实现人脸年龄性别识别 计算机竞赛

文章目录 0 前言1 项目课题介绍2 关键技术2.1 卷积神经网络2.2 卷积层2.3 池化层2.4 激活函数&#xff1a;2.5 全连接层 3 使用tensorflow中keras模块实现卷积神经网络4 Keras介绍4.1 Keras深度学习模型4.2 Keras中重要的预定义对象4.3 Keras的网络层构造 5 数据集处理训练5.1 …

【源码复现】图神经网络之PPNP/APPNH

目录 1、论文简介2、论文核心介绍2.1、现有方法局限2.2、PageRank&Personalized PageRank2.3、PPNP&APPNP 3、源码复现3.1、模型总体框架3.2、PPNP3.3、APPNP3.4、MLP(两层) 1、论文简介 论文题目——《PREDICT THEN PROPAGATE: GRAPH NEURAL NETWORKS MEET PERSONALI…

Spring Task定时任务框架

二十四、Spring Task 24.1 介绍 Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 定位&#xff1a;定时任务框架 作用&#xff1a;定时自动执行某段Java代码 为什么要在Java程序中使用Spring Task&#xff1f; 应用场景…

ACM练习——第一天

因为最近要去农大参加他们的算法邀请赛&#xff0c;然后赛制是ACM赛制的&#xff0c;所以我就直接很迷茫。 然后我就找到了牛客的ACM练习题&#xff0c;好好的练习一下ACM写法&#xff0c;而且我还要被迫写C&#xff0c;哭了。 开始钻研 1.从Java过度到C 题目源于牛客网&…

[工业自动化-14]:西门子S7-15xxx编程 - 软件编程 - STEP7 TIA博途是全集成自动化软件TIA portal快速入门

目录 一、TIA博途是全集成自动化软件TIA portal快速入门 1.1 简介 1.2 软件常用界面 1.3 软件安装的电脑硬件要求 1.4 入口 1.5 主界面 二、PLC软件编程包含哪些内容 2.1 概述 2.2 电机运动控制 一、TIA博途是全集成自动化软件TIA portal快速入门 1.1 简介 Siemens …

Java中的7大设计原则

在面向对象的设计过程中&#xff0c;首先需要考虑的是如何同时提高一个软件系统的可维护性和可复用性。这时&#xff0c;遵从面向对象的设计原则&#xff0c;可以在进行设计方案时减少错误设计的产生&#xff0c;从不同的角度提升一个软件结构的设计水平。 1、单一职责 一个类…