flutter开发实战-ValueListenableBuilder实现局部刷新功能

flutter开发实战-ValueListenableBuilder实现局部刷新功能

在创建的新工程中,点击按钮更新counter后,通过setState可以出发本类的build方法进行更新。当我们只需要更新一小部分控件的时候,通过setState就不太合适了,这就需要进行局部更新,可以通过provider等状态管理库来实现。当然flutter为我们提供了ValueListenableBuilder来实现局部控件的刷新。

一、ValueListenableBuilder

ValueListenableBuilder的属性如下

const ValueListenableBuilder({super.key,required this.valueListenable,required this.builder,this.child,}) : assert(valueListenable != null),assert(builder != null);
  • ValueListenable继承自Listenable,是一个可监听对象。
  • builder是一个typedef
    typedef ValueWidgetBuilder = Widget Function(BuildContext context, T value, Widget? child);
  • child,可选,可为空

查看ValueListenableBuilder类的实现可以看到

class _ValueListenableBuilderState<T> extends State<ValueListenableBuilder<T>> {late T value;@overridevoid initState() {super.initState();value = widget.valueListenable.value;widget.valueListenable.addListener(_valueChanged);}@overridevoid didUpdateWidget(ValueListenableBuilder<T> oldWidget) {super.didUpdateWidget(oldWidget);if (oldWidget.valueListenable != widget.valueListenable) {oldWidget.valueListenable.removeListener(_valueChanged);value = widget.valueListenable.value;widget.valueListenable.addListener(_valueChanged);}}@overridevoid dispose() {widget.valueListenable.removeListener(_valueChanged);super.dispose();}void _valueChanged() {setState(() { value = widget.valueListenable.value; });}@overrideWidget build(BuildContext context) {return widget.builder(context, value, widget.child);}
}

在initState中对传入的可监听对象进行监听,执行_valueChanged方法,_valueChanged执行了setState来触发当前状态的刷新。我们知道setState会执行build方法,触发执行build方法,最总触发widget.builder回调,这样就实现了局部刷新。

child的作用也是非常重要的,我们将Widget放到child中,在执行builder时,会直接使用child,将不会再构建一遍child。

二、ValueListenableBuilder实现局部刷新示例

下面使用ValueListenableBuilder来实现一个局部刷新的示例。示例中,在界面中,有一个显示按钮与隐藏按钮控制修改isShowNotifier的value。通过ValueListenableBuilder的builder中来判断需要显示的内容。
示例代码如下

import 'package:flutter/material.dart';class ValueListenablePage extends StatefulWidget {const ValueListenablePage({super.key});@overrideState<ValueListenablePage> createState() => _ValueListenablePageState();
}class _ValueListenablePageState extends State<ValueListenablePage> {final isShowNotifier = ValueNotifier<bool>(false);@overridevoid initState() {// TODO: implement initStatesuper.initState();}void show() {isShowNotifier.value = true;}void hide() {isShowNotifier.value = false;}@overridevoid dispose() {// TODO: implement disposeisShowNotifier.dispose();super.dispose();}@overrideWidget build(BuildContext context) {Size screenSize = MediaQuery.of(context).size;return Scaffold(appBar: AppBar(title: const Text('ValueListenablePage'),),body: Container(width: screenSize.width,height: screenSize.height,child: Stack(alignment: Alignment.center,children: [Positioned(top: 50,child: buildValueListenable(context),),Positioned(top: 200,child: buildButton(context),),],),),);}Widget buildHide(BuildContext context) {return Container(color: Colors.green,padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),child: Text("当前隐藏",textAlign: TextAlign.center,overflow: TextOverflow.ellipsis,softWrap: true,style: TextStyle(fontSize: 16,fontWeight: FontWeight.w600,fontStyle: FontStyle.italic,color: Colors.white,decoration: TextDecoration.none,),),);}Widget buildValueListenable(BuildContext context) {return ValueListenableBuilder(valueListenable: isShowNotifier,builder: (BuildContext aContext, bool isShow, Widget? child) {if (isShow) {return child ?? buildHide(context);} else {return buildHide(context);}},child: Container(color: Colors.blueGrey,padding: EdgeInsets.symmetric(vertical: 50, horizontal: 50),child: Text("ValueListenableBuilder Child",textAlign: TextAlign.center,overflow: TextOverflow.ellipsis,softWrap: true,style: TextStyle(fontSize: 16,fontWeight: FontWeight.w600,fontStyle: FontStyle.italic,color: Colors.white,decoration: TextDecoration.none,),),),);}Widget buildButton(BuildContext context) {return Container(width: 300,height: 220,color: Colors.deepOrange,child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [TextButton(onPressed: () {show();},child: Container(height: 50,width: 200,color: Colors.lightBlue,alignment: Alignment.center,child: Text('点击显示',style: TextStyle(fontSize: 14,color: Colors.white,),),),),TextButton(onPressed: () {hide();},child: Container(height: 50,width: 200,color: Colors.lightBlue,alignment: Alignment.center,child: Text('点击隐藏',style: TextStyle(fontSize: 14,color: Colors.white,),),),),],),);}
}

效果图如下

在这里插入图片描述

在这里插入图片描述

三、小结

flutter开发实战-ValueListenableBuilder实现局部刷新功能

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

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

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

相关文章

OSI七层模型与TCP/IP四层模型的区别(计算机网络)

一、OSI七层网络模型 OSI 网络模型共有 7 层&#xff0c;分别是应用层、表示层、会话层、传输层、网络层、数据链路层和物理层。 应用层&#xff0c;负责给应用程序提供统一的接口&#xff1b;表示层&#xff0c;负责把数据转换成兼容另一个系统能识别的格式&#xff1b;会话…

NDK打印android日志

首先在cpp文件中 引入 #include <android/log.h> 然后就可以使用 __android_log_print方法&#xff0c;第一个参数是log level&#xff0c;第二个是tag&#xff0c;第三个是日志内容。 #include <jni.h> #include <string> #include <android/log.h&g…

Syntax Error: TypeError: Cannot read properties of undefined (reading ‘styles‘)

日志只有这一行&#xff0c;比较难排查 排查途径&#xff1a; 1、从上图找到唯一的文件输出output.js&#xff0c;断点查看堆栈信息&#xff0c;如下图&#xff0c;可以看到这个错误是由于哪个文件引起的 以为从App.vue中定位到原因了&#xff0c;其实也不对&#xff0c;继续…

nnDetection简明安装和训练流程(Windows环境)

安装 首先&#xff0c;官方不建议Windows安装&#xff0c;推荐Linux Docker 我的环境&#xff1a; ● 操作系统平台&#xff1a; Windows 10 ● Python&#xff1a; 3.8 ● Torch/TorchVision&#xff1a; 1.10.1cu102/ 0.11.1 ● GPU&#xff1a; Nvidia RTX 2080 Ti 11G…

FTP协议详解

一&#xff1a;概述 FTP协议是一个用于在计算机网络上在客户端和服务器之间进行文件传输的应用层协议&#xff0c;其英文全称是File Transfer Protocol。是TCP/IP协议簇中的重要一员。客户端和服务器按照FTP的协议规范进行通讯来实现文件传输。 对于FTP服务器好理解&#xff0c…

B.牛牛排队伍——模拟双链表

当前位置: 首页 > news >正文 B.牛牛排队伍——模拟双链表 news 2023/12/1 15:14:37 分析 题目其实很简单,就是双链表的增删查,但是刚开始,直接vis标记删除元素,查找一个位置的前一个用的while不断向前找,但是TLE;毕竟O(n*k)的复杂度,一开始没有考虑时间复杂度…

2023第十二届“认证杯”数学中国数学建模国际赛赛题A完整解析

A题完整题解 写在前面假设数据预处理 问题一1 基于自适应ARIMA-BP神经网络模型的影响因素预测1.1 ARIMA模型的建立1.2 BP神经网络模型的建立1.3 基于GABP神经网络的预测模型构建1.4 自适应混合ARIMA-BP神经网络模型的建立1.5 模型求解 代码Q1_1.mQ1_2.m 完整代码与论文获取 写在…

如何快速选出一支好股票?

俗话说得好&#xff1a;股票选得好&#xff0c;收益少不了&#xff01;不用多说&#xff0c;相信大伙儿都知道选一支好股票究竟有多重要。 但是选股可不像咱们去菜市场买菜一样&#xff0c;看着顺眼就成。选股&#xff0c;其实是一个专业性特别强的技术活儿。 目前最常用的选股…

CoreDns在K8S中的作用原理概述

在Kubernetes中&#xff0c;CoreDNS是一款用于DNS解析的开源软件&#xff0c;它被广泛用于实现Kubernetes集群内部的服务发现和域名解析功能。CoreDNS提供了灵活的插件体系&#xff0c;可以通过插件来实现各种功能&#xff0c;包括内部Service域名解析。 在Kubernetes集群中&a…

xcode swiftui项目添加依赖

打开项目targets——Build Phases 点击“” 属于Apple SDKs的依赖可以直接添加 其他依赖需要在 Add Other中添加&#xff0c;在右上角用名字搜索或者URL地址(如GitHub上插件的地址)搜索,然后添加&#xff0c;也可添加本地文件

HarmonyOS通过OpenGL渲染显示yuv数据

一、UI页面render_page.ets Column() {XComponent({id: "XComponent88",type: XCompentConstants.XCOMPONENT_TYPE,libraryname: XCompentConstants.XCOMPONENT_LIBRARY_NAME}).width(640).height(360).onLoad((xComponentContext?: object | Record<string, () …

【RPC】基础

RPC 基本概念组成存在的问题python实现 基本概念 RPC是一个计算机通信协议&#xff0c;允许运行在一台计算机的程序调用另一台计算机的子程序&#xff0c;允许调用远程服务&#xff0c;是一个C/S模式。下图是百度百科的信息&#xff0c;可以看到&#xff0c;它的作用就是我想用…

history和hash两种路由模式原理,和优缺点

Hash Hash 模式是在 URL 中使用井号&#xff08;#&#xff09;来作为路由的模式。在 Hash 模式下&#xff0c;即使页面刷新&#xff0c;浏览器仍然只会请求页面的初始 HTML 文件&#xff0c;所有的路由变化都会在 URL 前面添加 “#/” 符号。 原理 在 Hash 模式下&#xff0c;路…

gitlab高级功能之CI/CD组件 - 实践(二)

上一篇主要讲解了CI/CD组件的原理&#xff0c;看起来稍微有一点枯燥&#xff0c;那么接下来给大家演示下如何使用。 案例 创建一个项目&#xff08;README.md&#xff0c;template目录&#xff09; 案例1 step1: 在template中新建yml文件&#xff0c;cat templates/test-st…

Verilog 入门(六)行为建模

文章目录 过程结构initial 语句always 语句 事件控制语句块顺序语句块并行语句块 过程性赋值阻塞性过程赋值非阻塞性过程赋值 过程结构 下述两种语句是为一个设计的行为建模的主要机制&#xff1a; initial 语句always 语句 一个模块中可以包含任意多个 initial 或 always 语…

C/C++11 语法/概念易错总结(1)

文章目录 缺省参数函数重载引用引用和指针内联宏的优缺点auto范围forNULL和nullptr 缺省参数 半缺省参数必须从右往左依次来给出&#xff0c;不能间隔着给 void Func(int a, int b 10, int c 20){cout<<"a "<<a<<endl;cout<<"b &…

一些ab命令

1.ab简介 ab是apache自带的压力测试工具&#xff0c;是apachebench命令的缩写。ab非常实用&#xff0c;它不仅可以对apache服务器进行网站访问压力测试&#xff0c;也可以对或其它类型的服务器如nginx、tomcat、IIS等进行压力测试。 ab的原理&#xff1a;ab命令会创建多个并发…

在编程中遇到的问题总结

IDEA空包粘黏问题 创建好目录以后会发现idea自动将空包合并在一起了&#xff0c;而且点击设置里面也没有Compact Middle Package Compact Middle Package如果不在设置的主面板上&#xff0c;则点击Tree Appearance&#xff0c;会发现Compact Middle Package在Tree Appearance里…

elupload base64

创作灵感也许就是这会儿还没有入睡吧&#xff0c;对接百度图片OCR功能&#xff0c;需要将图片转为BASE64上传调用百度的接口api&#xff0c;进行研究实现。页面如下&#xff0c;点击后选择图片文件后不是直接上传&#xff0c;而是获取图片的bytes数据&#xff01; <el-uploa…

516. 最长回文子序列

给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 示例 1&#xff1a; 输入&#xff1a;s "bbbab" 输出…