Flutter页面保持实现思路，附源码

最新推荐文章于 2024-09-18 17:07:15 发布

半斤水泥

最新推荐文章于 2024-09-18 17:07:15 发布

阅读量355

点赞数

本文链接：https://blog.csdn.net/hhyihquk1/article/details/99677225

版权

目前的最优解：

main中使用BottomNavigator+pageview+automatickeepliveClientMixin的方法实现

1、BottomNavigator使用thme修改点击效果，将splashColor和highlightColor设置为transparent；

2、pageview禁用滑动效果，

3、main中使用with AutomicKeepAliveClientMixin

4、子页面使用statefulWidget并混入AutomicKeepAliveClientMixin

优点，不会再main的run方法中一次性加载所有的页面，而是第一次加载后就不会重新绘制了，降低了内存的消耗

将子页面包裹在indexedstack或者stack中都会在run的时候加载所有的界面，使用tabbarview的话还会也行，读者可以自行实验，下面附上源码，参考用，需要联系作者请添加qq535495438

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

半斤水泥

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Flutter Bloc和StreamController结合实现登录功能

菜鸟博客

07-06

1108

Bloc和StreamController交互实现登录功能

Flutter 之页面状态保持

u010844678的专栏

08-22

3314

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

参与评论您还未登录，请先登录后发表或查看评论

Flutter 保持页面状态

小小熊的博客

10-08

351

Flutter 保持页面状态 /// 计数器 class CounterPage extends StatefulWidget{ @override State<StatefulWidget> createState() { return _CounterPageState(); } } class _CounterPageState extends State&...

Flutter 使用 TabBarView 和 PageView 时保持页面状态：AutomaticKeepAliveClientMixin

最新发布

qq_52871405的博客

09-18

1350

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

flutter保持页面状态

microcosm1994的博客

09-24

793

在子页面加上混合AutomaticKeepAliveClientMixin这个Mixin 重写wantKeepAlive方法，修改返回值为true 在home页面使用IndexedStack来控制页面显示 // home.dart body: IndexedStack( index: 0, //当前的下标 children: <Widget>[IndexPage(), Buy(), MyPage(), MyPage()]//子页面的Widget ..

Flutter学习笔记页面保持状态

weixin_42215775的博客

09-25

407

首先在需要保持页面状态的页面混入AutomaticKeepAliveClientMixin 然后重写wantKeepAlive方法返回true class HomeState extends State<HomePage> with AutomaticKeepAliveClientMixin { @override // TODO: implement wantKeepAli...

Flutter-保持页面状态 AutomaticKeepAliveClientMixin

m0_48259951的博客

02-03

1775

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

Flutter源码剖析(二):源码的阅读与调试环境配置

苟不利包子

11-06

5509

综述 Flutter从架构上来说有3部分：用Dart写的Framework层，面向开发者用Java/Kotlin写的Embdder层（For Android，iOS是OC/Swift），...

flutter_cube-源码.rar

10-10

本文将对Flutter Cube的源码进行深入解读，揭示其内部的工作机制和设计思路。首先，我们来看看Flutter Cube的核心组件——`CubeTransition`。这个类是整个库的灵魂，它负责管理3D旋转动画的执行。`CubeTransition`...

用Flutter实现一个仿Twitter的点赞效果

2401_84122760的博客

04-21

811

面试题集可以帮助你查漏补缺，有方向有针对性的学习，为之后进大厂做准备。但是如果你仅仅是看一遍，而不去学习和深究。那么这份面试题对你的帮助会很有限。最终还是要靠资深技术水平说话。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。建议先制定学习计划，根据学习计划把知识点关联起来，形成一个系统化的知识体系。学习方向很容易规划，但是如果只通过碎片化的学习，对自己的提升是很慢的。

Android View 绘制流程，flutter页面跳转防止页面重复刷新

m0_64382950的博客

11-29

384

resultSize = childDimension; resultMode = MeasureSpec.EXACTLY; } else if (childDimension == LayoutParams.MATCH_PARENT) { // 子元素设置的 match_content 充满入容器，就把尺寸设置为入容器的尺寸，模式设置为EXACTLY resultSize = size; resultMode = MeasureSpec.EXACTLY; } else if (childDimension

Flutter页面状态保留策略

github_72392797的博客

06-26

542

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

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

乘着风游荡在蓝天边

07-15

2698

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

Flutter实现页面切换后保持原页面状态的3种方法

08-26

主要给大家介绍了关于Flutter实现页面切换后保持原页面状态的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

Flutter 分析初始页面架构源码 main.dart

yaoxin521123的博客

01-25

519

Flutter 初始页面架构main.dart // import 导入类库，与java类似 import 'package:flutter/material.dart'; import 'text_example.dart'; // void main()就是程序的入口函数 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // 这个Widget是应用的根布局，类似于页面容器 // 这个类就相当与.

Flutter源码系列之《一》Flutter的热更新探索(上)

快乐de灰太狼的专栏

02-22

2486

在Google发布Flutter之后我一直对它保持很高的热情，尤其是Flutter支持热更新，但在1.7.8版本之后由于某些原因Google屏蔽了热更新功能，这着实让让人失落……于是抽了点时间研究了一下Flutter的加载过程，目的是找到可以实现热更新的方式

Flutter 通过路由实现 App 端授权管理

Flutter 跨平台技术研究

12-01

523

本篇介绍了利用 Fluro 路由管理实现路由权限拦截的两种方式，两种方式各有好处，使用过程中可以根据实际情况决定使用哪一种方法。

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

lyz0925的博客

05-28

1357

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

Flutter踩坑-保持页面状态

hhyihquk1的博客

05-24

631

参考原文：https://www.jb51.net/article/157680.htm 筛选重点：保持页面状态需要什么？ 1、使用bottomnavigatorbar，并且body是pageview或者tabbarview，使用官方推荐的AutomaticKeepAliveClientMixin 2、body中没有上述的组件，使用indexStack或者offstage包裹body中的...