Flutter页面状态保留策略

Flutter 使用 TabBarView 和 PageView 时保持页面状态:AutomaticKeepAliveClientMixin 在 Flutter 开发中,TabBarView 和 PageView 是常用的多页面视图组件,它们支持懒加载功能,即用户在切换页面时,只有当前可见的页面会被构建,其他页面不会被加载以节省资源。然而,这也会导致一个常见的问题:当我们从一个页面切换到另一个页面并返回时,先前的页面可能会被销毁并重新构建,这样页面的滚动位置、表单数据等状态就会丢失。通过使用 AutomaticKeepAliveClientMixin,我们可以确保当用户切换到其他页面并返回时,页面的状态(如列表滚动位置、用户输入等)不会丢失。 阅读详情

目的: 防止每次点击底部按钮都进行一次页面渲染和网络请求

1. 使用IndexedStack

简单,只需要把被渲染的组件外部套一层IndexedStack即可
缺点: 在应用启动的时候,所有需要保存状态的页面都会直接被渲染,保存起来. 对性能有影响

2. 使用PageController

实现较为复杂,但是不用应用启动就全部加载

PageController实现页面状态保留步骤:

  1. 将要进行状态保留的页面使用PageView包裹,其中需要最少两个参数:controller和children. children就是要渲染的页面. controller需要自定义
    在这里插入图片描述
  2. 自定义controller
    在这里插入图片描述
  3. 在被渲染的页面中with AutomaticKeepAliveClientMixin 类, 重写 get方法进行配置,build方法中调用super.builder(context)

    在这里插入图片描述
    ps: 前两步骤是在外层组件中设置的,如:foot组件Tabs, 在Tabs中渲染页面,如Home. 第三步则是在Home中完成
【HCIP-AI 进阶之路(一)】零成本白嫖算力,7天速通华为人工智能资深开发者认证 《HCIP-AIEIDeveloper认证备考指南》摘要:本文深度解析华为HCIP-AI(H13-331)认证考试要点,涵盖考试大纲、评分标准及备考策略。重点剖析昇腾AI全栈架构,包括达芬奇架构核心计算单元(Cube/Vector/Scalar Unit)和四大层级关系(芯片-CANN-框架-应用)。针对无硬件资源的开发者,提供MindSpore CPU版、ModelArts免费算力和沙箱实验室三种零成本实践方案。文章强调该认证对国企/华为生态企业求职者的价值,并指出多选题是主要失分点。下篇将聚焦计算机视觉 阅读详情

相关推荐

普通人也能看懂的Transformer源代码解释(PyTorch)

Transformer源代码解释之PyTorch篇 章节 词嵌入 位置编码 多头注意力 搭建Transformer 在这里插入图片描述 词嵌入 Transformer本质上是一种Encoder,以翻译任务为例,原始数据集是以两种语言组成一行的,在应用时,应是Encoder输入源语言序列,Decoder里面输入需要被转换的语言序列(训练时)。一个文本常有许多序列组成,常见操作为将序列进行一些预处理(如词切分等)变成列表,一个序列的列表的元素通常为词表中不可切分的最小词,整个文本就是一个大列表,元素为一个一

qq_50974223的博客 4167

Flutter PageView/TabBarView等控件保存状态的问题解决方案

PageView + BottomNavigationBar 或者 TabBarView + TabBar 的时候大家会发现当切换到另一页面的时候, 前一个页面就会被销毁, 再返回前一页时, 页面会被重建, 随之数据会重新加载, 控件会重新渲染 带来了极不好的用户体验, 跟原生的Pager 显示的效果不太一样。通过 PageStorage 这种方式重新进入页面,页面其实是重新开始build,但是会根据 didChangeDependencies 里面的数据来初始化。4.3 读取state。

Dream It Possible 5264

Oracle EBS财务模块(三)总账功能

(一)总账管理系统主要功能  总账管理系统(Oraclegeneralledger)是一个公司一切账务系统的核心,它好比是公司会计信息的中央处理器。总账管理系统提供了一个完整的财务管理核算及分析流程。它是所有子账户的信息存储器,因此反映了所有子账户的财务和现金活动。总账管理系统的主要作用是记录公司的财务活动,并生成财务报表和管理报表,以帮助公司内外人士进行决策。一个公司或组织的制造系统、项目管理系

苏南生的优快云博客 2万+

Flutter-保持页面状态 AutomaticKeepAliveClientMixin

flutter项目中,如果切换tabar,initState方法会被反复重调,无法保持页面的状态。若想保持原有状态,切换页面时不再调用initState方法,只需要通过。给页面的状态管理类实现一个特征-------使用AutomaticKeepAliveClientMixin。同Vue中的使用原理一样。:在State类中混入 AutomaticKeepAliveClientMixin这个类。:在这个类里面定义一个。

m0_48259951的博客 1964

微积分,用编程理解高数(python,C,C++)

很好理解,导数中,x是哪一点的导数,dx是精准度,y等于f(x)即函数。导数结果就是瞬时变化率。积分很好理解,a为下限,b为上限,y为函数,结果就是y=f(x)下a到b的面积。只要用定积分代入a=0,b=10(10s)y=x(1*x=1)就得到结果。F(x)为原函数,即微分后的函数是f(x)dx,微分前是F(x)一列车初始速度为10m/s,加速度为。才几十行代码,微积分也不是很难啊。,问速度达到20时车走了多少米。

linhhanpy的博客 1178

使用mne包来对脑电数据进行预处理(一)

MNE(MNE-Python)是一个用于处理脑电(EEG)、磁图(MEG)和其他神经科学数据的Python库。它提供了丰富的功能,包括数据加载、预处理、分析和可视化,旨在帮助研究人员和神经科学家更轻松地进行脑电数据的处理和分析。在本文中,我们使用mne来对不同的格式的脑电数据集进行数据读取。

m0_71596228的博客 4303

Flutter PageView 自由控制状态保持

3.触发修改_wantKeepAlive的方法,并调用updateKeepAlive(重点,必须调用,否则无效)第一次切换购物车页面后,不在触发build,点击首页的按钮后,在进入购物车页面,会又触发build。正常使用购物车,需要保持页面状态,但在新的商品加入购物车后,需要重新获取购物车列表。每次点击切换页面,都会触发build方法,无法达到保存状态的要求。购物车页只会build一次,后续切换不会再执行build。点击按钮后,购物车页的build重新打印。方法有很多,推荐使用事件总线。

Dream It Possible 1915

Python逆向实战:突破PDD长连接抓包的技术解析

本文详细解析了如何通过Python逆向技术突破PDD长连接抓包的难点,包括分析PDD的网络机制、绕过SSL证书验证以及完整抓包实战流程。文章重点介绍了使用Frida和VAXposed工具解决长连接和SSL Pinning问题,并提供了Python代码示例和数据分析方案,帮助开发者高效抓取PDD数据。

weixin_28678151的博客 1222

Flutter实现页面状态缓存的几种方法

有以下两种方法:1、使用IndexedStack组件缓存页面 IndexedStack组件会把组件一次性先创建好,堆叠窗口,通过index切换显示对应的窗口 2、使用PageView组件,组件混入AutomaticKeepAliveClientMixin配合使用**(推荐使用)** 然后在需要缓存的组件里混入AutomaticKeepAliveClientMixin 如果觉得有用随手点个赞吧,谢谢 关注我,不定时分享技术干货~扫二维码关注公众号...

Z.Dragon 的博客 5067

RAG项目简历包装指南:从“流水线工人”到“问题解决者”的跃迁(附代码与思路)

本文代码已在Python 3.11 + CUDA 12.3环境测试,部分功能需LangChain 0.2+支持。

Conan_0728的博客 1885

OpenClaw 2026 路线图详解:3 大协作能力升级与社区贡献增长 62% 的实证分析

介绍 OpenClaw 2026 如何通过上下文锚定(Context Anchoring)、协作质量定义和责任边界机制,将 AI 编程工具从单点补全升级为嵌入代码生命周期的协作对齐系统,并详解 `.openclaw/config.yaml` 中 `context_anchor` 配置的实操方法与效果

weixin_42545292的博客 383

flutter TabBarView和PageView的页面状态保存问题

我们在使用TabBar或者BottomNavigationBar的时候,都会配合使用 TabBarView和PageView 进行页面展示,但如果不做特别处理的话,我们会发现在每次切换页面之后,页面都会重新刷新(比如一个列表页面,拉到最后一条数据,然后跳转到其它Tab再跳转回来,列表又变成从第一条数据开始展示),实在是很不友好。这里有两种办法解决: PageStorageKey Automati...

zhumj_zhumj的专栏 5807

FlexSim:FlexSim软件介绍与安装

在开始安装FlexSim之前,首先需要从FlexSim官方网站下载安装包。FlexSim提供不同版本的软件,包括教育版、专业版等,确保选择适合您需求的版本。下载页面通常会列出系统要求,包括操作系统、处理器、内存和硬盘空间,确保您的计算机满足这些要求。访问FlexSim官方网站。导航至下载页面。选择适合您需求的FlexSim版本。点击下载按钮,开始下载安装包。在开始构建模型之前,首先需要明确模型的目标。模型目标是指导模型设计和分析的核心,它定义了你希望通过模型解决的问题或探索的系统行为。

kkchenjj的博客 5802

Flutter 之页面状态保持

一般情况下,我们使用tab切换的时候希望操作完毕之后,能够记住上个页面的状态, 但是使用Flutter的BottomNavigationBar的 时候默认是不记录页面状态的,即切换页面会导致重新加载。 这对我们来说很痛苦,而且非常的浪费资源 如果要想我们的页面在切换完毕之后记录之前的状态。需要一下几个步骤: 1、在包含BottomNavigationBar的页面中,body应该返回Ind...

u010844678的专栏 3473

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

Flutter-保存状态

Flutter之保存状态 ##保存状态: 在页面A进行界面操作后,跳转到其他界面B,再返回页面A时,页面A仍是离开前的状态 步骤 既然是保存状态,所以要使用 StatefulWidget 继承 State 的同时需要使用 with 引入状态函数 AutomaticKeepAliveClientMixin 定义状态值,重写状态函数 wantKeepAlive ,返回 true 编写状态改变...

Clear亮的博客 2652

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

Flutter 三种方式实现页面切换后保持原页面状态

前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验。 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前...

weixin_33881041的博客 1705

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

flutter_学习记录_02底部 Tab 切换保持页面状态的几种方法

IndexedStack 和 Stack 一样,都是层布局控件, 可以在一个控件上面放置另一 个控件,但唯一不同的是 IndexedStack 在同一时刻只能显示子控件中的一个控 件,通过 Index 属性来设置显示的控件。IndexedStack 来保持页面状态的优点就是配置简单。IndexedStack 保持页面状 态的缺点就是不方便单独控制每个页面的状态。

lyz0925的博客 1592

Flutter组件--底部tab切换的时候页面禁止重新加载(IndexedStack(保持页面状态),AutomaticKeepAliveClientMixin)

IndexedStack使用详情 AutomaticKeepAliveClientMixin使用详情 页面缓存 切换底部tab的时候,页面禁止重新加载 切换底部tab的时候,页面只加载一次 保持页面状态 页面只加载一次

eastWind1101的博客 1898

【flutter项目实战】第七节 在使用getx的flutter项目中保持页面状态

我们知道,getx的view,都是使用实现的,而是基于实现的并且是不管页面在不在屏幕上,都会加载,所以不符合我们的预期来实现了虽然也是基于,但是她只会在进入屏幕的时候加载,否则是不加载的。

winni_a的博客 1162

Flutter 四种方式实现页面切换后保持原页面状态

前言: 在 Flutter 应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,不仅增加额外开销,而且体验差。 使用IndexedStack实现 IndexedStack继承自Stack,它的作用是显示第index个child,其它child在页面上是不可见的,但所有child的状态都被保持,所以这个Widget可以实现我们的需求,我们只需要将现在的body...

乘着风游荡在蓝天边 2932

Flutter: PageView/TabBarView 等控件保存状态的问题解决方案

前言: 我们通常会在用到 PageView + BottomNavigationBar 或者 TabBarView + TabBar 的情况. 但是大家发现当我们切换到另一页面的时候, 前一个页面就会被销毁, 当再返回前一页时, 页面会被重建. 随之数据要重新加载, 控件要重新渲染 带来了极不好的用户体验. 下面是一些解决方案: 解决方案一: 使用   AutomaticKee...

6064

Flutter页面切换状态维持

在flutter中,使用类似于PageView进行页面切换时,如果不做处理,不会保持页面原状态。也就是从A页面切换到B页面,再从B页面切回到A页面,A页面显示都会重新加载。如果A页面加载比较耗时(例如有网络请求),就会带来不好的用户体验。如下图所示,页面已经加载过了,再次切换时还会重新加载。 最终,我们想要的效果是页面第一次加载会进行网络请求,当再次切换回到该页面时,希望维持原状态不变,效果如下图所示: 一、TabBar+TabBarView的页面切换状态维持 方法:使用AutomaticKeepAli

qq_34484722的博客 1022

flutter学习--保持页面状态

在工作中切换页面时,再切换回来,时要求页面状态不发生改变的。这能给APP浏览者最好的体验,几乎所有的APP都有这个需求,属于一个大众需求。 With 关键字的使用 with是dart的关键字,意思是混入的意思,就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类, 避免多重继承导致的问题。 class _KeepAliveDemoState extends State<KeepAli...

pgg_cold的博客 3464

Flutter - APP主界面Tabbar保持页面状态

APP主界面每个模块的页面一般由底部tabbar+顶部导航 + 中间内容组成的。一般情况下,每个模块的页面初始化一次就可以了,每次都刷新的话不太友好。在didChangeDependencies判断currentIndex,以下代码添加了。这是通过IndexedStack保持页面状态的,还是改的build方法。如果需要在某个页面跳转返回到tabbar的指定页面,这里说一下在tabbar中保持页面状态的方式。如果不需要返回tabbar的指定页面,可以把。如果需要每次进入页面刷新得话,可以添加。

iotjin的专栏 1671

flutter 保存列表状态和控制列表状态

【代码】flutter 保存列表状态和控制列表状态。

weixin_44911775的博客 364
上一篇: Flutter打包网络问题解决办法
下一篇: Flutter实现页面间传参
Gohoy
博客等级 码龄4年 271粉丝 67原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值