Flutter开发 - 如何在点击tabbar后让对应的页面刷新

最新推荐文章于 2023-05-23 18:05:11 发布
最新推荐文章于 2023-05-23 18:05:11 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： Flutter实用开发技巧合集 文章标签： Flutter GlobablKey 传值 生命周期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CodingFire/article/details/107787631
版权
本文介绍了在Flutter开发中如何利用GlobalKey实现点击TabBar时刷新对应页面的方法。当点击个人中心Tab时，通过GlobalKey调用页面的刷新方法更新用户信息数据。步骤包括在个人中心页面定义 GlobalKey 和刷新方法，使用带Key的构造方法创建个人中心，最后在TabBar点击事件中调用刷新方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在iOS/Android中，如果希望在点击切换到对应的界面之后刷新当前页面，iOS/Android提供了一套完整的生命周期供我们使用，同时tabbar也了提供点击后对应的协议/接口。可以说是非常成熟和方便了。

Flutter也有自己的生命周期，但却没有原生那么成熟，下一篇我们单独来说下Flutter生命周期的使用，今天我们来说一种通过GlobalKey来实现点击后刷新当前界面的方法。

我们来假定一个场景，我们有一个app，有四个tabber，我们希望在点击个人中心的tab时可以刷新个人中心中的用户信息数据，这个时候我们需要分三步来做：

  • 第一步，在个人中心定义GlobalKey和要刷新的方法，并在initState中初始化该方法
import 'package:flutter/material.dart';
///定义GlobalKey
GlobalKey<_MinePageState><
了解本专栏 订阅专栏 解锁全文 超级会员免费看
flutter TabBar 实战使用技巧
智玲君
01-15 1547
Tabbar属性介绍： const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2 thi
Flutter TabBar、TabBarView的使用
热门推荐
yechaoa
05-23 1万+
文章目录效果：简介TabBarTabBarViewTabBar和TabBarView联动点击更新完整代码 效果： 说实话，这个效果实现起来并没有我想象中的那么简单，demo跟实际开发差的还是蛮大的，一方面是学习成本，要查看源码，另一方面就是页面的布局，层级嵌套的太深了。。 简介 TabBar和TabBarView到底是什么关系呢，简而言之，TabBar就是导航栏，TabBarView就是导...
Flutter 切换tabbar 视图重新渲染解决方法
fyq520521的博客
04-18 2903
>底部tabbar点击page切换时，会重新加载页面，重新请求接口浪费资源，为解决这个尴尬处境，有个简易的办法在bottomtabbar类中，对 return scaffold (body: 加入indexedstack body:IndexedStack( children: <Widget>[ PageOne (); PageTwo () ], ...
flutter返回刷新数据
qq_44280408的博客
12-11 846
需求：A页面跳到B页面，在B页面做数据更新，返回A页面刷新结果； 思路：在A页面跳转到B页面的时候使用then函数，在B返回A的时候进行数据刷新操作。 Navigator.of(context).push(MaterialPageRoute(builder: (context) { return OpinionDetails(feedbackModel: _feedbackLoader[index]);//是一个feedbackModel
uniapp微信小程序自定义tabbar，并且实现每次切换都刷新页面
qq_40922656的博客
12-21 8022
0、page.json定义页面pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/indexPage/index", //首页 "style": { "navigationStyle": "custom", "navigationBarTextStyle": "white" } }, { "path":
解决Flutter PageView页面切换时数据刷新问题
杰森丶郭达斯坦森的博客
08-19 3525
例如使用了PageView组件，每次切换页面时都会走initState()和dispose()方法，从而使得加载过的页面切换时也会数据刷新，可以加入一下方法完美解决。首先补充一下，之前我没有写是在切换pageView页面的主页面写还是展示的子页面写，这里我说一下，一定要在。使用这个方法，否则不生效！
Flutter 关于组件更新组件刷新的 一个方法
weixin_45349850的博客
02-08 2712
TabBarView 通过传参改变tab的 需要重新给_tabController 的 length赋值。可以通过改变组件的key 可以重新加载initState() 对length 重新赋值 避免报错。也可以用于组件的刷新 会重新走一遍生命周期。在使用 TabBar。
Flutter跨平台移动端开发丨封装顶部导航栏部件 TabBar Widget
全栈工程师
07-04 561
支持左右滑动切换、不限 item 数量的 tabbar 是分类信息列表展示必不可少的组件，在 flutter 中可通过 AppBar + TabBar + PageView + ListView 完成这个需求 TabBar 部件 支持修改 tab 背景颜色、底部横线颜色，tab 上的按钮样式以及对应切换的页面，可通过 List 传入，这样可以支持更多拓展需求 imp...
【Flutter学习记录】TabBar、TabBarView与TabController：难舍难分
weixin_42599186的博客
04-16 1524
前言 今天在学《Flutter实战》的TabBar组件的时候，遇到一个令我哭笑不得的bug，在此记录一下，以免以后继续掉坑。 TabBar 关于TabBar的知识我建议直接看《Flutter实战》5.6.2 AppBar 。此书十分优秀，强烈建议学习。 坑 起因是因为书上的一个示例： Material组件库中提供了一个TabBar组件，它可以快速生成Tab菜单，下面是上图对应的源码： class _ScaffoldRouteState extends State<ScaffoldRoute>
flutter（四）底部tabbar切换，顶部切换，页面跳转
07-07 9630
flutter（四）底部tabbar，顶部切换，页面跳转 上篇文章为大家讲述了flutter的组件；（动态组件和静态组件）本篇文章接着上篇内容继续为大家介绍flutter的其他主要组件（底部选项卡，顶部切换等等实用组件），本文针对功能点做特殊实例讲解，特别详细的整体使用我们会在其它的文章中来展开说明。每篇文章只要有代码说明 就会有demo提供。 前言 一、底部tabbar 二、图片资源加载...
Flutter tabBar切换页面防止重置
XueQiYa的博客
07-30 2067
TabBar 配合TabBarView切换页面，然后每个页面是一个列表加载数据，但是切换页面后listview的数据会被重置， 重新被加载了，解决办法使用 with AutomaticKeepAliveClientMixin 实现 @protected bool get wantKeepAlive=>true class _OpenLogListComponentState extend...
flutter导航栏返回按钮返回时刷新数据
qq_42681355的博客
03-19 865
在appBar: AppBar(后加入 leading: new IconButton( tooltip: '返回上一页', icon: const Icon(Icons.arrow_back), onPressed: () { Navigator.push( context, MaterialPageRoute(
Flutter实现酷狗流畅Tabbar效果
Android技术之家
01-28 723
在2021年末，酷狗发布了最新版11.0.0版本，这是一次重大的UI重构，更新完打开着实让我耳目一新。在原有风格上，整个App变得更加清爽，流畅。其中Tabbar的风格让我非常感兴趣，如果...
Flutter组件--底部tab切换的时候页面禁止重新加载(IndexedStack(保持页面状态),AutomaticKeepAliveClientMixin)
eastWind1101的博客
05-23 1689
IndexedStack使用详情 AutomaticKeepAliveClientMixin使用详情 页面缓存 切换底部tab的时候,页面禁止重新加载 切换底部tab的时候,页面只加载一次 保持页面状态 页面只加载一次
TabBar切换后刷新界面问题怎么解决
华山论码
05-17 1346
重写viewWillAppeaer 这个方法，因为TabBar页面切换不重新生成，不走viewDidLoad方法 ViewDidLoad: 需要的视图元素都在此方法加载，例如视图是一个Form，有3个label，这个方法一次成型. ViewWillAppear: 这里通常不做视图的修改，而用来更新Form数据，就是给给form重新填入新数据，该页面从别的页面回来时更新。UIView的创建非常费时费力，因此到 viewWillAppear时，iphone已经蓄势待发地、兴冲冲地要去显示了，就不要在这个地方再干
uniapp使用自定义tabbar时实现跳转tabbar不刷新
Seven597的博客
01-09 5150
先在，pages.json中配置tabbar，如下,设置高度为0，界面只需要设置路径。这样的话四个主界面可以基于路由占位的方式进行组件化开发！自定义tarbar的代码如下，图标和路径自行改变。在main.js 全局挂载。
uniapp tabbar底部栏 子组件页面不刷新解决方案
Komorebi的博客
05-09 3190
场景：uniapp 来回切换底部栏tabbar，页面初始化数据，当前子组件页面会发送数据请求，再次切换进入，当前页面的子组件不发送请求 解决方案： 1. 父组件在onShow钩子里面中向子组件传递随机数 2. 子组件接收数据，并进行watch监听数据，直接调用初始化函数，从而解决页面不刷新的问题 ...
解决uniapp项目开发从某一页面返回到tabbar页面时，页面不刷新，无法重新获取跟新后的数据，无法重新渲染页面问题。
m0_55315930的博客
05-12 1万+
解决uniapp项目开发从某一页面返回到tabbar页面时，页面不刷新，无法重新获取跟新后的数据，无法重新渲染页面问题。
Flutter中遇到的需求解决二[BottomNavigationBar底部菜单切换不刷新的实现]
chenyidong521的博客
03-25 854
Flutter底部菜单切换不刷新的实现
tabbar页面每次切换都刷新
05-11
TabBar页面切换时，如果每次都刷新，会大大降低应用程序的性能，因此不建议这样做。如果你想要在TabBar页面切换时保留之前的状态，可以考虑使用页面缓存。在 Flutter 中，可以使用 `AutomaticKeepAliveClientMixin` 混入类来实现页面缓存。 具体实现方法如下： 1. 在需要缓存的页面中，混入 `AutomaticKeepAliveClientMixin` 类，并实现 `wantKeepAlive` 方法，返回 `true`： ``` class MyPage extends StatefulWidget { @override _MyPageState createState() => _MyPageState(); } class _MyPageState extends State<MyPage> with AutomaticKeepAliveClientMixin { @override bool get wantKeepAlive => true; // ... } ``` 2. 在 TabBar 页面中，将每个 Tab 对应的页面封装成 KeepAliveWidget 类型，这样就可以保持页面状态： ``` class TabBarPage extends StatefulWidget { @override _TabBarPageState createState() => _TabBarPageState(); } class _TabBarPageState extends State<TabBarPage> { final List<Widget> _pages = [ KeepAliveWidget(child: MyPage1()), KeepAliveWidget(child: MyPage2()), KeepAliveWidget(child: MyPage3()), ]; int _currentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( body: IndexedStack( index: _currentIndex, children: _pages, ), bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) { setState(() { _currentIndex = index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Page 1', ), BottomNavigationBarItem( icon: Icon(Icons.mail), label: 'Page 2', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Page 3', ), ], ), ); } } ``` 这样，在 TabBar 页面切换时，之前打开的页面状态将会被保留。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodingFire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值