Flutter实现局部刷新的几种方式

目录

前言

1.局部刷新的重要性

1.概念

2.重要性

2.局部刷新实现的几种方式

1.使用setState方法进行局部刷新

2.使用StatefulWidget和InheritedWidget局部刷新UI

3.ValueNotifier和ValueListenableBuilder

4.StreamBuilder

5.Provider

6.GetX

7.使用GlobalKey


前言

       在 Flutter 中,状态管理指的是如何管理和更新应用中的数据状态,并且根据状态的变化来更新 UI。有效的状态管理能够帮助开发者创建更高效、更可维护的应用。

        setState是 Flutter 中最基本的状态管理方法,当状态发生变更的时候,会通知框架重新构建UI。当然我们知道当我们调用setState方法的时候,页面会重绘,当页面布局比较复杂的时候,有时候我们仅仅需要更新某个单独的UI,这个时候如果使用setState方法,则会有比较大的性能消耗去重绘当前页面UI.

        那么Flutter中有哪些方法可以局部刷新UI呢,这篇博客列举了Flutter实现局部刷新的几种方式。

1.局部刷新的重要性

1.概念

        局部刷新指的是只刷新界面的一部分,而不是整个页面。这样可以提高性能和用户体验。

2.重要性

  1. 避免不必要的重绘,提高性能
  2. 提供更流畅的用户体验
  3. 减少资源消耗

2.局部刷新实现的几种方式

1.通过setState局部刷新

        setState是Flutter 中最常用的状态管理方法,用于通知框架状态发生变化,导致界面重建。

        我们创建Flutter工程的时候,系统默认生成的计时器的例子,就是setState局部刷新的例子。

import 'package:flutter/material.dart';class StatePartialRefreshPage extends StatefulWidget {const StatePartialRefreshPage({super.key});@overrideState<StatePartialRefreshPage> createState() =>_StatePartialRefreshPageState();
}class _StatePartialRefreshPageState extends State<StatePartialRefreshPage> {int _count = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("setState局部刷新",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('您点击了$_count次',style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),),const SizedBox(height: 20,),FilledButton(onPressed: () {setState(() {_count++;});},child: const Icon(Icons.add)),],)),);}
}

        图1.setState局部刷新

         当页面比较简单的时候,可以直接使用setState方法局部刷新UI。

        使用场景:简单的状态变化,如按钮点击计数、开关状态等。

        注意事项:

  1. 频繁调用 setState 可能导致性能问题
  2. 避免在 build 方法中调用 setState 

2.使用StatefulWidget和InheritedWidget局部刷新UI

        StatefulWidget 是具有状态的组件,InheritedWidget 用于在组件树中共享数据。

        当我们需要共享数据的时候,可以考虑StatefulWidget和InheritedWidget局部刷新UI.

        完整代码如下:

        图2.共享数据的方式刷新UI

import 'package:flutter/material.dart';class MyInheritedWidget extends InheritedWidget {final int counter;const MyInheritedWidget({super.key,required this.counter,required super.child,});@overridebool updateShouldNotify(covariant InheritedWidget oldWidget) {return true;}static MyInheritedWidget? of(BuildContext context) {return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();}
}class InheritedWidgetPage extends StatefulWidget {final String title;const InheritedWidgetPage({super.key, required this.title});@overrideState<InheritedWidgetPage> createState() => _InheritedWidgetPageState();
}class _InheritedWidgetPageState extends State<InheritedWidgetPage> {int counter = 0;void _incrementCounter() {setState(() {counter++;});}@overrideWidget build(BuildContext context) {return MyInheritedWidget(counter: counter,child: Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(children: [const Divider(),const CounterDisplay(),const SizedBox(height: 20),ElevatedButton(onPressed: _incrementCounter,child: const Text('add'),),],),),),);}
}class CounterDisplay extends StatelessWidget {const CounterDisplay({super.key});@overrideWidget build(BuildContext context) {final inheritedWidget = MyInheritedWidget.of(context);return Text('点击次数: ${inheritedWidget?.counter}');}
}

        这种方式主要使用场景如下:组件树中共享状态时,如主题、语言设置等。

        优点就是数据共享方便,代码简介

        缺点就是使用复杂,性能可能收到影响

3.ValueNotifier和ValueListenableBuilder

        ValueNotifier 是一个简单的状态管理工具,ValueListenableBuilder 用于监听 ValueNotifier 的变化。

        使用方法也非常简单:

        1.实例化ValueNotifier

        2.要监听的Widget对象是用ValueListenableBuilder包裹起来

        3.事件触发数据的变更方法

        这种方式和前几种方式比较非常的简单易容,性能也很高

        缺点:只能处理简单的状态变化

        完整的代码如下:

import 'package:flutter/material.dart';class ValueNotifierPage extends StatefulWidget {final String title;const ValueNotifierPage({super.key, required this.title});@overrideState<ValueNotifierPage> createState() => _ValueNotifierPageState();
}class _ValueNotifierPageState extends State<ValueNotifierPage> {final ValueNotifier<int> _counter = ValueNotifier<int>(0);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: ValueListenableBuilder<int>(valueListenable: _counter,builder: (context, value, child) {return Text('您点击了$value次',style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),);},)),floatingActionButton: FloatingActionButton(child: const Icon(Icons.add),onPressed: () {_counter.value ++;},));}
}

4.StreamBuilder

        Stream是一种用于传递异步事件的对象,可以通过StreamController发送事件。在需要刷新UI的地方,可以发送一个事件到Stream,然后使用StreamBuilder监听该Stream,当收到新的事件时,StreamBuilder会自动重新构建UI。这种方式适用于需要监听多个异步事件的情况。

        当我们需要处理异步数据流,如网络请求、实时数据等的时候,可以考虑使用StreamBuilder。例如在下面的例子中,我们写了一个模拟网络请求的异步方法,当网络请求没返回正确结果的时候,我们可以加载进度条。

        这种方式的优点就是可以对异步请求进行更加精准的控制,例如网络请求的状态等。却迪奥就是复杂度比较高,可能需要更多的代码。        

        完整的代码如下:

import 'dart:async';
import 'package:flutter/material.dart';class StreamBuilderRefreshUIPage extends StatefulWidget {final String title;const StreamBuilderRefreshUIPage({super.key, required this.title});@overrideState<StreamBuilderRefreshUIPage> createState() =>_StreamBuilderRefreshUIPageState();
}class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {late Future<String> _data;Future<String> fetchData() async {// 模拟网络请求延迟await Future.delayed(const Duration(seconds: 2));// 返回模拟数据return 'Hello, Flutter!';}@overridevoid initState() {// TODO: implement initStatesuper.initState();_data = fetchData();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: FutureBuilder<String>(future: _data,builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return const CircularProgressIndicator();} else if (snapshot.hasError) {return Text('Error: ${snapshot.error}');} else {return Text('Data: ${snapshot.data}');}},),),floatingActionButton: FloatingActionButton(onPressed: fetchData,tooltip: 'Increment',child: const Icon(Icons.add),),);}
}

5.Provider

       Provider 是 Flutter 推荐的状态管理解决方案,Consumer 用于读取和监听状态。

        我们还以定时器为例。

        1.首先我们导入Provider.

provider: ^6.1.2

        2.自定义ChangeNotifier类。

        ChangeNotifier 是 Flutter SDK 中的一个简单的类。它用于向监听器发送通知。换言之,如果被定义为 ChangeNotifier,你可以订阅它的状态变化。(这和大家所熟悉的观察者模式相类似)。

        在我们要实现的代码中,有两个变量_counter1和_counter2.代码定义如下:

class CounterModel extends ChangeNotifier {int _counter1 = 0;int _counter2 = 0;void addCounter1(){debugPrint('counter:$_counter1');_counter1 += 1;notifyListeners();}void addCounter2(){debugPrint('counter:$_counter2');_counter2 += 1;notifyListeners();}
}

        3.使用Customer把我们要刷新的Widget包裹起来

            Consumer<CounterModel>(builder: (context, counterModel, child) {return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Text('计数器1个数: ${counterModel._counter1}'),ElevatedButton(onPressed: (){counterModel.addCounter1();}, child: const Icon(Icons.add),),],);},),

        4.完整代码如下:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';class ProviderRefreshPage extends StatefulWidget {final String title;const ProviderRefreshPage({super.key, required this.title});@overrideState<ProviderRefreshPage> createState() => _ProviderRefreshPageState();
}class CounterModel extends ChangeNotifier {int _counter1 = 0;int _counter2 = 0;void addCounter1(){debugPrint('counter:$_counter1');_counter1 += 1;notifyListeners();}void addCounter2(){debugPrint('counter:$_counter2');_counter2 += 1;notifyListeners();}
}class _ProviderRefreshPageState extends State<ProviderRefreshPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[const SizedBox(height: 10,), // 添加一些间距const Divider(),const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),Consumer<CounterModel>(builder: (context, counterModel, child) {return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Text('计数器1个数: ${counterModel._counter1}'),ElevatedButton(onPressed: (){counterModel.addCounter1();}, child: const Icon(Icons.add),),],);},),Consumer<CounterModel>(builder: (context, counterModel, child) {return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Text('计数器1个数: ${counterModel._counter2}'),ElevatedButton(onPressed: (){counterModel.addCounter2();}, child: const Icon(Icons.add),),],);},),const Divider(height: 20,),],),),);}
}

6.GetX

        我们还可以使用GetX实现UI的局部刷新。

        首先安装GetX:

get: ^4.6.6

        然后我们把变量封装在GetxController中.

class CounterManagerController extends GetxController {final counter1 = 0.obs;final counter2 = 0.obs;void incrementCount1() {counter1.value++;}void incrementCount2() {counter2.value++;}
}

        再使用Obx把需要显示逻辑的Widget包裹起来。

Obx(()=> Text('计数器1个数: ${controller.counter2.value}'))

        完整的代码如下:

import 'package:flutter/material.dart';
import 'package:get/get.dart';class CounterManagerController extends GetxController {final counter1 = 0.obs;final counter2 = 0.obs;void incrementCount1() {counter1.value++;}void incrementCount2() {counter2.value++;}
}class GetXRefreshUIPage extends StatelessWidget {final String title;const GetXRefreshUIPage({super.key, required this.title});@overrideWidget build(BuildContext context) {final CounterManagerController controller = Get.put(CounterManagerController());return Scaffold(appBar: AppBar(title: Text(title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[const SizedBox(height: 10,), // 添加一些间距const Divider(),const Text('计数器实例',style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),ElevatedButton(onPressed: () {controller.incrementCount1();},child: const Icon(Icons.add),),],),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),ElevatedButton(onPressed: () {controller.incrementCount2();},child: const Icon(Icons.add),),],),const Divider(height: 20,),],),),);}
}

        当然GetX中实现局部刷新的方式还有其它几种写法,大家可以看一下它的文档。这里只是提供了其中的一种实现思路。

7.通过GlobalKey局部刷新

        上述三种实现方式都是通过框架实现的,如果你不想导入这个框架,我们可以使用GlobalKey来实现UI的局部刷新功能。

        在整个应用程序中是唯一的Key GlobalKey可以唯一标识元素,GlobalKey提供了对这些元素相关联的访问,比如BuildContext。对于StatefulWidgets,GlobalKey也提供对State的访问。

       在我们的计时器的demo中,如果我们通过GlobalKey的方式局部刷新UI,首先我们把要局部刷新的Widget提出来,单独封装成一个组件。

        完整代码如下,我们封装要局部刷新的Widget,并且提供一个刷新内部数据的接口,onPressed.

class CounterText extends StatefulWidget {const CounterText(Key key) : super(key: key);@overrideState<StatefulWidget> createState() {return CounterTextState();}
}class CounterTextState extends State<CounterText> {String _text="0";@overrideWidget build(BuildContext context) {return Center(child: Text(_text,style: const TextStyle(fontSize: 20),),);}void onPressed(int count) {setState(() {_text = count.toString();});}
}

        然后在我们的主界面实例化GlobaKey:

  int _count   = 0;int _count2  = 0;GlobalKey<CounterTextState> textKey = GlobalKey();GlobalKey<CounterTextState> textKey2 = GlobalKey();    

            在需要刷新UI的事件中,通过GlobalKey调用上一步提供的接口,刷新即可。

        完整代码如下:

import 'package:flutter/material.dart';class GlobalKeyRefreshPage extends StatefulWidget {final String title;const GlobalKeyRefreshPage({super.key, required this.title});@overrideState<GlobalKeyRefreshPage> createState() => _GlobalKeyRefreshPageState();
}class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {int _count   = 0;int _count2  = 0;
//包裹你定义的需要更新的weightGlobalKey<CounterTextState> textKey = GlobalKey();GlobalKey<CounterTextState> textKey2 = GlobalKey();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title:  Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[const SizedBox(height: 10,), // 添加一些间距const Divider(),const Text('计数器实例',style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [CounterText(textKey),ElevatedButton(onPressed: () {_count++;textKey.currentState?.onPressed(_count);},child: const Icon(Icons.add),),],),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [CounterText(textKey2),ElevatedButton(onPressed: () {_count2++;textKey2.currentState?.onPressed(_count2);},child: const Icon(Icons.add),),],),const Divider(height: 20,),],),),);}
}class CounterText extends StatefulWidget {const CounterText(Key key) : super(key: key);@overrideState<StatefulWidget> createState() {return CounterTextState();}
}class CounterTextState extends State<CounterText> {String _text="0";@overrideWidget build(BuildContext context) {return Center(child: Text(_text,style: const TextStyle(fontSize: 20),),);}void onPressed(int count) {setState(() {_text = count.toString();});}
}

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

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

相关文章

实战:功能强大齐全BBS论坛项目Echo简介

项目简介 Echo 是一套前后端不分离的开源社区系统&#xff0c;基于目前主流 Java Web 技术栈&#xff08;SpringBoot MyBatis MySQL Redis Kafka Elasticsearch Spring Security ...&#xff09;&#xff0c;并提供详细的开发文档和配套教程。包含帖子、评论、私信、系…

HarmonyOS NEXT:一次开发,多端部署

寄语 这几年特别火的uni-app实现了“一次开发&#xff0c;多端使用”&#xff0c;它这个端指的是ios、安卓、各种小程序这些&#xff0c;而HarmonyOS NEXT也提出了“一次开发&#xff0c;多端部署”&#xff0c;而它这个端指的是终端设备&#xff0c;也就是我们的手机、平板、电…

记录些MySQL题集(2)

MySQL 不使用limit的分页查询 limit问题&#xff1a;limit&#xff0c;offset递增问题。随着offset的增加&#xff0c;条数不变&#xff0c;耗时却增加了。 limit 0,10 耗时1ms limit 300000,10 耗时152ms limit 600000,10 耗时312ms 毫秒级别可能没感觉。假…

gitlab 搭建使用

1. 硬件要求 ##CPU 4 核心500用户 8 核心1000用户 ##内存 4 G内存500用户 8 G内存1000用户 2. 下载 链接 3. 安装依赖 yum -y install curl openssh-server postfix wget 4. 安装gitlab组件 yum -y localinstall gitlab-ce-15.9.3-ce.0.el7.x86_64.rpm 5. 修改配置文…

使用Python的Turtle模块绘制小猪佩奇

引言 在编程学习中&#xff0c;Turtle是一个非常有趣且实用的模块&#xff0c;尤其适合初学者。它允许用户通过控制一个可以在屏幕上移动的小海龟来绘制图形&#xff0c;从而直观地理解坐标、角度和循环等概念。本篇博客将介绍如何使用Python的Turtle模块来绘制一个可爱的卡通…

PostgreSQL日志文件配置,记录所有操作记录

为了更详细的记录PostgreSQL 的运行日志&#xff0c;我们一般需要修改PostgreSQL 默认的配置文件&#xff0c;这里整理了一些常用的配置 修改配置文件 打开 PostgreSQL 配置文件 postgresql.conf。该文件通常位于 PostgreSQL 安装目录下的 data 文件夹中。 找到并修改以下配…

IDEA实现热部署

什么是热部署&#xff1f; 热部署&#xff08;Hot Deployment&#xff09;是指在应用程序运行过程中&#xff0c;无需停止整个应用程序或重新启动服务器&#xff0c;就能够部署新的代码、资源或配置文件&#xff0c;使其立即生效。这种部署方式有助于提高开发效率和系统的可用性…

【边缘计算网关教程】4.西门子PPI协议对接

前景回顾&#xff1a;【边缘计算网关教程】3.创建第二个流程-CSDN博客 目录 1. 硬件连接 2. PLC串口参数 2.1. 打开STEP7软件 2.2. 查看通信参数 3. 网关设置 3.1. PLC连接设置 3.2. 数据点位设置 3.3. 测试 西门子 PPI 协议 适配PLC&#xff1a;S7-200 西门子S7-200 PLC…

【RHCE】综合实验0710综合实验

题目&#xff1a; 主服务器192.168.244.130 防火墙允许服务的放行&#xff1a; selinux放行 [rootlocalhost ~]# ll -Z /nfs/rhce 总用量 4 -rw-r--r--. 1 root root unconfined_u:object_r:default_t:s0 8 7月 10 16:52 index.html -rw-r--r--. 1 nobody nobody system_…

推荐一款uniapp拖动验证码插件

插件地址&#xff1a;易盾验证码 - DCloud 插件市场 具体使用方式访问插件地址自行获取

企业网三层架构

企业网三层架构&#xff1a;是一种层次化模型设计&#xff0c;旨在将复杂的网络设计分成三个层次&#xff0c;每个层次都着重于某些特定的功能&#xff0c;以提高效率和稳定性。 企业网三层架构层次&#xff1a; 接入层&#xff1a;使终端设备接入到网络中来&#xff0c;提供…

什么叫图像的双边滤波,并附利用OpenCV和MATLB实现双边滤波的代码

双边滤波&#xff08;Bilateral Filtering&#xff09;是一种在图像处理中常用的非线性滤波技术&#xff0c;主要用于去噪和保边。它在空间域和像素值域上同时进行加权&#xff0c;既考虑了像素之间的空间距离&#xff0c;也考虑了像素值之间的相似度&#xff0c;从而能够有效地…

西安明德理工学院师生莅临泰迪智能科技开展参观见习活动

为进一步深化校企合作&#xff0c;落实高校应用型人才培养。7月8日&#xff0c;西安明德理工学院与广东泰迪智能科技股份有限公司联合开展学生企业见习活动。西安明德理工学院金融产业学院副院长刘敏、金融学专业负责人张莉萍、金融学专业教师曹艳飞、赵浚妤、泰迪智能科技董事…

板级调试小助手(2)ZYNQ自定义IP核构建属于自己的DDS外设

一、前言 在上期文章中讲述了小助手的系统结构和原理。在PYNQ的框架开发中&#xff0c;我们一般可以将PL端当做PS端的一个外设&#xff0c;通过读写寄存器的方式来操作外设的功能&#xff0c;就类似于在开发ARM和DSP中操作外设一样&#xff0c;不同时的是&#xff0c;我们可以通…

【实战】Nginx+Keepalived高可用部署,后端Tomcat

目录 一、下载Tomcat安装包 二、安装Tomcat 三、 运行测试Tomcat是否安装成功 四、开放8080端口 五、Tomcat服务脚本 一、环境说明&#xff1a; 三、安装Keepalived 3.1、主机安装配置 实战目的是为了Nginx和后端的Tomcat都可以实现高可用&#xff0c;防止单节点故障的…

AWS-S3实现Minio分片上传、断点续传、秒传、分片下载、暂停下载

文章目录 前言一、功能展示上传功能点下载功能点效果展示 二、思路流程上传流程下载流程 三、代码示例四、疑问 前言 Amazon Simple Storage Service&#xff08;S3&#xff09;&#xff0c;简单存储服务&#xff0c;是一个公开的云存储服务。Web应用程序开发人员可以使用它存…

方便好用的C#.Net万能工具库Masuit.Tools

文章目录 简介开发环境安装使用特色功能示例代码1. 检验字符串是否是Email、手机号、URL、IP地址、身份证号等2.硬件监测(需要管理员权限&#xff0c;仅支持Windows&#xff0c;部分函数仅支持物理机模式)3.html的防XSS处理&#xff1a;4.整理Windows系统的内存&#xff1a;5.任…

IAR全面支持芯驰科技E3系列车规MCU产品E3119/E3118

中国上海&#xff0c;2024年7月11日 — 全球领先的嵌入式系统开发软件解决方案供应商IAR与全场景智能车芯引领者芯驰科技宣布进一步扩大合作&#xff0c;最新版IAR Embedded Workbench for Arm已全面支持芯驰科技的E3119/E3118车规级MCU产品。IAR与芯驰科技有着悠久的合作历史&…

docker私有仓库harbor安装

Harbor默认安装 下载harbor https://github.com/goharbor/harbor/releases/download/v2.11.0/harbor-offline-installer-v2.11.0.tgz 目前要求docker版本&#xff0c;docker 20.10.10-ce &#xff0c;和docker-compose 1.18.0 查看 docker-compose版本 docker-compose --ver…

【精品资料】模块化数据中心解决方案(33页PPT)

引言&#xff1a;模块化数据中心解决方案是一种创新的数据中心设计和部署策略&#xff0c;旨在提高数据中心的灵活性、可扩展性和效率。这种方案通过将数据中心的基础设施、计算、存储和网络资源封装到标准化的模块中&#xff0c;实现了快速部署、易于管理和高效运维的目标 方案…