首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

前言: Flutter应用,导航栏切换页面后默认情况下会丢失页面状态,即每次进入页面都会重新初始化状态,如果在initState打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,...它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter实现类似喜马拉雅的导航效果...底部导航,body展示当前选中的子页面。...可以看到,从第二页切换回第一页,第一页的状态已经丢失 第二步:实现底部导航切换保持原页面状态 可能有些小伙伴搜索后会开始直接使用官方推荐的AutomaticKeepAliveClientMixin...现在已经可以看到,不管是切换底部导航还是切换首页顶部导航,所有的页面状态都可以被保持,并且应用第一次加载,终端只看到recommend initState的日志,第一次切换首页顶部导航至vip页面

2.5K30
您找到你想要的搜索结果了吗?
是的
没有找到

【Flutter 专题】11 底部状态栏了解下?

和尚今天来整理一下在学习测试 Flutter 需用到的底部导航栏 BottomNavigationBar,使用方式很简单,和尚感觉效果比原生的 Android 要好一些。...与 body 同级的位置添加 BottomNavigationBar,BottomNavigationBarItem 可以添加文字标签或图标 (Icons/Image) 等,若图片不存在时会显示空白;..."这里是【HomePage】->【签到】页面" : "这里是【HomePage】->【我】页面"; return new Center( child: new Container...然而和尚添加了更改状态的样式,点击底部状态栏依旧不会变色;和尚查了很久突然发现,和尚的 HomePage() 继承的是 StatelessWidget 无状态样式,此时更换为 StatefulWidget...实用小贴士 通过点击 BottomNavigationBar 对 PageView 切换过程,可以设置动画过程,也可以直接跳转到对应页面,需要设置 animateToPage 或 jumpToPage

1.6K41

掌握Flutter底部导航栏:畅游导航之旅

本节,我们将介绍如何实现底部导航栏的自定义外观。 4.1 更改选中项颜色和图标 通过设置BottomNavigationBar的selectedItemColor属性,可以更改选中项的颜色。...通过将多个页面放置一个PageView,并配合底部导航栏实现页面切换,可以为用户提供更加流畅的导航体验。...通过设置_bottomNavigationBarState类的_onItemTapped函数,可以实现底部导航栏与页面的切换效果,并利用PageView的onPageChanged回调函数实现页面切换的同步更新...本节,我们将介绍如何实现底部导航栏的一些高级功能,包括添加徽章、动态更改导航栏项以及实现导航栏的动画效果。...通过build方法根据条件动态设置items属性,我们可以实现在运行时动态更改底部导航栏的内容。

11510

Flutter跨页面改变BottomNavigationBar选中下标

前言 需求是这样的,bottomBar内有A,B,C,D页面,4个页面由tabBar管理显示,当在A页面点击按钮让TabBar选中B页面展示,通俗来讲就是两个不相邻的Widget里,一个Widget...思路: 解决方案1: flutter内有Provider的状态管理,可以定义一个全局的Provider ,Main函数内装载,放入顶层结构,全局访问Provider改变Provider的状态,以此来更新...print("tabbar build"); return Consumer( builder: (_,__,___){ // 获取更改的下标...class EventTabBarIndex{ // 参数为int 即需要改变的下标 int index; EventTabBarIndex(this.index); } 2.BottomNavigationBar...方案2 使用event_bus发送事件与监听事件的方式,向事件总线添加了一个事件,需要定义发送的消息内容,同时发送者发送数据,监听者监听事件作出相应。 可依据自我情况合理选择实现方案

1.1K20

Flutter 全栈式——页面框架

用于指定当前App打开显示的页面 routes Map 路由表,定义页面跳转规则 initialRoute String 初始路由名称 onGenerateRoute...RouteFactory 通过pushNamed跳转路由页面routes查找不到时回调 onUnknownRoute RouteFactory onGenerateRoute 无法生成路由时调用...,按钮text等 localeListResolutionCallback LocaleListResolutionCallback 该回调负责应用启动以及用户更改设备的区域设置选择应用的区域设置...showSemanticsDebugger bool 为true,打开Widget边框,显示布局边界 debugShowCheckedModeBanner bool 为truedebug模式下显示右上角的...的 ActionBar body Widget 当前页面所显示的主要内容 floatingActionButton Widget Material中所定义的FAB,是一个悬浮的功能按钮 floatingActionButtonLocation

2.8K30

Flutter底部tab切换保持页面状态的几种方法

首先看一下如下视频: 通过视频我们可以看到,当通过底部tabBar将页面“首页”和“分类”之间进行切换的时候,每一次进入页面的时候该页面数据都会重新加载。...第一种方式:采用IndexdStack IndexdStack和Stack一样,都是层布局控件,可以一个控件上面放置另一个控件,但唯一不同的是,IndexdStack同一刻只能显示子控件的一个控件..._pages, ), 这样就能够实现保持页面状态了,效果如下: 我们可以看到,此时,页面数据最开始进来的时候进行加载,然后就保持住这个页面的状态了,并不会每次进来都进行数据的加载刷新了...使用IndexedStack来保持页面状态的优点就是配置简单,但是它也有很大的缺点:IndexedStack管理的子页面一开始就全部一次性加载出来了,不管有没有显示出来,然后通过index属性来确定到底显示哪一个页面...,页面数据首次进入该页面的时候进行刷新;而其他没有实现页面保持的页面每次进入该页面的时候,数据都会刷新。

5.9K20

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

2、四个切换页面 3、应用启动主界面 4、运行效果 五、相关资源 一、BottomNavigationBar 底部导航栏 ---- Scaffold 的 bottomNavigationBar 属性设置底部导航栏...UI 显示 ; 设置点击方法 : BottomNavigationBar 的 onTap 属性设置点击方法 , 传入 index 索引 , 该索引值是被点击的按钮索引 , 该方法主要操作当前的 currentIndex...类型 , 主要用于控制 PageView 的页面跳转 ; 滑动回调事件 : onPageChanged 参数设置滑动回调事件 , 传入 index 索引值 , 该事件 , 调用 setState...方法 , 更新底部导航栏 BottomNavigationBar 的当前索引值 , 并更新 UI 界面 ; 显示组件 : children 参数设置 Widget 数组即可 , 组件类型只要是 Widget...主动设置选中状态 : 滑动 PageView 界面 , 会回调 PageView 的 onPageChanged 方法 , 在此处调用 setState 方法 , 该方法设置 _currentIndex

4.1K20

使用BottomNavigationBar来定义底部导航栏

iOS,底部导航栏使用UITabBar就可以实现;Flutter,类似的效果可以通过BottomNavigationBar这个组件实现。..._tabbarIndex,//当前选中第几个item onTap: (index){//点击回调 setState(() {//当需要改变页面的参数值的时候,需要在该方法更新数据...,否则不会刷新页面 this....如下图所示,我lib文件夹下新建了一个pages文件夹,用于装所有的页面;pages文件夹下面又创建了一个tabs文件夹,用于装载跟底部导航栏相关的页面。 ?...3,如果某个Widget是一个页面,那么该Widget最好是以Page结尾,如果我本例定义的首页、分类和设置页面,其定义分别如下: //首页——Home.dart——HomePage import

1.4K30

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

, 同一间只显示一个 ; 三、BottomNavigationBar 底部导航栏 ---- 通过 Scaffold 组件的 bottomNavigationBar 字段 , 可以设置底部导航栏菜单..., 设置一个 BottomNavigationBar 组件 ; BottomNavigationBar 组件可设置 int currentIndex 当前的索引 , ValueChanged?...onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , BottomNavigationBarType?...; jumpToPage 页面跳转在底部菜单栏的 onTap 点击事件调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ; PageView 构造函数 : PageView...this.onPageChanged, // 页面切换回调该函数 List children = const [], this.dragStartBehavior

5.6K50

Flutte部件目录-Material Components 顶

应用程序结构和导航 Scaffold Appbar 上面两个基本部件已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间顶层视图之间切换。...BottomNavigationBar小部件实现此组件。 一个显示应用底部的材质小部件,用于少量视图中进行选择,通常介于3到5之间。...底部导航栏通常与Scaffold结合使用,Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...TabBarView 显示与当前选定选项卡相对应的部件的页面视图。 通常与TabBar结合使用。 ?...将按钮封装在工具提示窗口小部件,以便在按下窗口小部件(或者当用户采取其他适当的操作)显示标签。 ? DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品

9.4K40

Android使用BottomNavigationBar实现导航栏功能

基本属性 setActiveColor //选中item的字体颜色 setInActiveColor //未选中Item的颜色 setBarBackgroundColor//背景颜色 setMode(...BottomNavigationBar.MODE_FIXED) //填充模式,未选中的Item会显示文字,没有换挡动画 setMode(BottomNavigationBar.MODE_SHIFTING...) //换挡模式,未选中的Item不会显示文字,选中的会显示文字 setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC) //点击的时候没有水波纹效果...) { //获得选中状态触发,可以做fragmengt页面切换 Toast.makeText(MainActivity.this,"当前选中"+position,Toast.LENGTH_SHORT...setGravity(Gravity.TOP ) //位置 默认右上 .setAnimationDuration(200)//动画时长 .setHideOnSelect(false)//true当选中状态消失

95441

精通Java事务编程(4)-弱隔离级别之防止更新丢失

,计算新值并写回更新后的值) 复杂值中进行本地修改:例如,将元素添加到 JSON 文档的一个列表(需要解析文档,进行更改并写回修改的文档) 两个用户同时编辑 wiki 页面,每个用户通过将整个页面内容发送到服务器来保存其更改...,覆写数据当前的任何内容。...文档的一部分进行本地修改的原子操作 Redis支持修改数据结构(如优先级队列)的原子操作 并不是所有的写操作都可以用原子操作的方式来表达,例如维基页面的更新涉及到任意文本编辑 1,但是可以使用原子操作的情况下...2.3.5 冲突解决和复制 支持多副本的数据,防止丢失更新还需考虑:由于多节点上存在数据副本,不同节点可能并发修改数据,需采取额外措施防止丢失更新。 加锁、CAS前提都要求只有一个最新的数据副本。...这是 Riak 2.0 新数据类型思想,当一个值被不同客户端同时更新, Riak自动将更新合并在一起,避免发生更新丢失

59620

Flutter 全局控制底部导航栏和自定义导航栏的方法

移动应用开发,通常有两种常见的导航栏类型:底部导航栏(BottomNavigationBar)和自定义导航栏(CustomNavigationRail)。...枚举类型的使用 Flutter,枚举类型(Enum)是一种有限的、离散的数据类型,用于表示一组相关的常量值。枚举类型表示一组可能的选项非常有用,可以提高代码的可读性和可维护性。...介绍枚举类型及其Flutter的应用: 枚举类型是一种由一组命名的常量值组成的数据类型。Flutter,枚举类型通常用于表示一组相关的选项或状态,例如不同的导航栏类型、主题模式、状态等。...应用的根部件,使用 NavigationType 来决定当前显示的导航栏类型。 设置页面,提供一个开关按钮或者下拉菜单,让用户选择喜欢的导航栏类型。...根据用户的选择,我们应用的根部件中选择显示不同类型的导航栏,并且设置页面让用户选择喜欢的导航栏类型。

19610

如何在flutter构建响应式布局(第五节)

Flutter 设计响应式布局没有硬性规定。本文中,我将向您展示一些设计此类布局可以遵循的方法。...4.矢量图形 与使用像素位图创建相反,矢量图形是 XML 文件定义为路径和颜色的图像。它们可以缩放到任何大小而不会缩放工件。 Android ,您可以将?...您可以一个 Activity 运行多个 Fragment,但不能同时单个应用程序运行多个 Activity。...请记住, Flutter ,每个屏幕甚至整个应用程序也是小部件! 小部件本质上是可重用的,因此您在 Flutter 构建响应式布局无需学习任何其他概念。...但是现在,如果您移动到特定屏幕然后视图之间切换,您将丢失页面的上下文;也就是说,您将始终返回第一页,即 Chats。为了解决这个问题,我使用了多个回调函数将所选页面返回到HomePage.

2.7K10
领券