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

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

第一种方式:采用IndexdStack IndexdStackStack一样,都是层布局控件,可以一个控件上面放置另一个控件,但唯一不同的是,IndexdStack同一刻只能显示子控件中的一个控件..._currentIndex], bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中的颜色..._pages, ), 这样就能够实现保持页面状态了,效果如下: 我们可以看到,此时,页面的数据只最开始进来的时候进行加载,然后就保持住这个页面的状态了,并不会每次进来都进行数据的加载刷新了..._pages, ), bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中的颜色...,页面数据只首次进入该页面的时候进行刷新;而其他没有实现页面保持的页面每次进入该页面的时候,数据都会刷新

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

Flutter 中使用 NavigationRail BottomNavigationBarFlutter专题33】

Flutter 中使用 NavigationRail BottomNavigationBar “作者:坚果 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA...本文将向您展示如何使用NavigationRailBottomNavigationBar Flutter 中创建自适应布局。我们将浏览一下这个概念,然后通过一个完整的例子来在实践中应用这个概念。...当屏幕很大,我们显示NavigationRail,当屏幕较小时,我们显示BottomNavigationBar。一次只出现其中一个。...每个视图都与底部标签栏的一个标签导航栏的一个项目相连。 如果屏幕宽度小于 640 像素,则将呈现底部标签栏,而不会显示左侧导航栏。...类 (flutter.dev) BottomNavigationBar 类(flutter.dev) 后记 您已经学习了一种使用 NavigationRail BottomNavigationBar

2K40

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

前言: Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,...第一步:实现固定的底部导航 通过flutter create生成的项目模板中,我们先简化一下代码,将MyHomePage提取到一个单独的home.dart文件,并在Scaffold脚手架中添加bottomNavigationBar...: BottomNavigationBar( items: items, currentIndex: currentIndex, onTap: onTap ), body: bodyList...: BottomNavigationBar( items: items, currentIndex: currentIndex, onTap: onTap), // body: bodyList[...更新 前面底部导航介绍了使用IndexedStackOffstage两种方式实现保持页面状态,但它们的缺点在于第一次加载便实例化了所有的子页面State。

2.5K30

Flutter 中使用 WebView

即可搜索到比较流行的插件,如下图所示: 其中 webview_flutter 是官方维护的 WebView 插件,特性是基于原生 Flutter SDK 封装,继承 StatefulWidget,因此支持内嵌于...webview_flutter 封装的 Flutter 插件,因此原理特性上基本与官方 WebView 一致的; 2018年 Flutter 发展初期,官方的 webview_flutter 插件有很多问题...https://pub.flutter-io.cn/packages/webview_flutter 导包 任何一个 Flutter package 一样,我们需要在 pubspec.yml 中的 dependencies...下加入 webview_flutter的 package dependencies: webview_flutter: ^0.3.10+4 然后点击标签栏出现的 Packages get,或者终端输入...我已经 StackOverflow Flutter 的 issue 提交了问题,如果后续有解决方案,我会持续更新的。

3.3K20

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

, 同一间只显示一个 ; 三、BottomNavigationBar 底部导航栏 ---- 通过 Scaffold 组件的 bottomNavigationBar 字段 , 可以设置底部导航栏菜单...onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , BottomNavigationBarType?...type 字段设置 , 有两个可选类型 , fixed shifting ; enum BottomNavigationBarType { /// BottomNavigationBar 导航栏底部的...BottomNavigationBarItem 宽度不变 fixed, /// BottomNavigationBar 导航栏底部的 BottomNavigationBarItem 组件的位置大小...onTap 字段设置点击事件 , 传入的参数是点击的底部导航栏索引值 ; BottomNavigationBar 构造函数 : BottomNavigationBar({ Key?

5.6K50

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

和尚今天来整理一下在学习测试 Flutter 需用到的底部导航栏 BottomNavigationBar,使用方式很简单,和尚感觉效果比原生的 Android 要好一些。...此时主模块 PageView 可以滑动切换内容,但是对应的底部状态栏不会变化;因为目前没有绑定对应的点击事件等;此时需要添加 PageController 状态栏的 onTap 点击事件;如下: int...然而和尚添加了更改状态的样式,点击底部状态栏依旧不会变色;和尚查了很久突然发现,和尚的 HomePage() 继承的是 StatelessWidget 无状态样式,此时更换为 StatefulWidget...;如下: onTap: (int index) { // 切换没有动画效果 // _pageController.jumpToPage(index); // 切换添加动画效果...GitHub Demo ---- 和尚刚接触 Flutter 时间不长,还有很多不清楚不理解的地方,如果又不对的地方还希望多多指出。以下是和尚公众号,欢迎闲来吐槽~

1.6K41

Flutter 2.8 release 发布,快来看看新特性吧

Flutter 开发人员进行性能跟踪遇到了问题。...所以该版本会复用早期平台视图创建的画布,这意味着开发者可以 HtmlElementView 的 Web 应用中拥有多个实例而不会降低性能,同时还可以减少使用平台视图的滚动卡顿。...WebView 3.0 这次 webview_flutter 的另一个新版本是,这里提高了版本号,是因为新功能的数量增加了,而且还因为 Web 视图 Android 上的工作方式可能发生了重大变化。...之前的版本中, webview_flutter 的 hybrid composition 模式已经可用,但并不是默认设置。...,另外 webview_flutter 还增加了一些要求很高的功能: 支持 POST GET 来填充内容(4450、4479、4480、4573) 从文件字符串(4446、4486、4544、4558

4.2K20

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

Flutter中,底部导航栏也是一项强大的功能,开发者可以利用Flutter框架提供的丰富组件灵活性,轻松实现各种样式交互效果的底部导航栏。...Flutter中,开发者可以使用内置的BottomNavigationBar组件轻松创建和定制底部导航栏,同时结合其他Flutter组件功能实现更丰富的导航体验。...创建底部导航栏的基本结构 底部导航栏Flutter中的创建可以通过两个主要的组件来实现:BottomNavigationBarBottomNavigationBarItem。...Flutter提供了丰富的选项,使开发者可以轻松自定义底部导航栏的外观,包括选中项的颜色图标、背景颜色形状、导航栏的高度以及图标的大小等。本节中,我们将介绍如何实现底部导航栏的自定义外观。...总结 底部导航栏是移动应用界面设计中常见且重要的组件之一,Flutter中实现底部导航栏不仅简单易行,而且具有丰富的功能灵活的定制性。

11410

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

2、四个切换页面 3、应用启动主界面 4、运行效果 五、相关资源 一、BottomNavigationBar 底部导航栏 ---- Scaffold 的 bottomNavigationBar 属性设置底部导航栏...UI 显示 ; 设置点击方法 : BottomNavigationBaronTap 属性设置点击方法 , 传入 index 索引 , 该索引值是被点击的按钮索引 , 该方法中主要操作当前的 currentIndex..., 调用 setState 方法 , 更新底部导航栏 BottomNavigationBar 的当前索引值 , 并更新 UI 界面 ; 显示组件 : children 参数中设置 Widget 数组即可...与 PageView 关联 ---- BottomNavigationBar 被动设备选中状态 : BottomNavigationBar 的索引通过一个组件内部定义的私有变量 _currentIndex...私有变量 , 即可控制 BottomNavigationBar 的选中状态 ; BottomNavigationBar 主动设置选中状态 : BottomNavigationBaronTap

4.1K20

Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

BottomNavigationBar({ Key key, @required this.items,// 当前的若干 BottomNavigationBarItem 组件 this.onTap...设置当前选中的底部导航索引 currentIndex: _currentSelectedIndex, ) 设置 BottomNavigationBar 组件的 onTap...回调事件 , 传入一个匿名回调函数 , 该匿名方法中回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 , 之后 BottomNavigationBar...底部导航栏切换选项卡界面 ---- BottomNavigationBar 底部导航栏的 onTap 回调方法中 , 设置当前选中的选项卡索引 , 根据该索引值修改 Scaffold 组件的 body...对应组件 , 如果选项卡索引为 0 , 显示组件 0 , 如果选项卡索引为 1 , 那么显示组件 1 ; 设置 body 字段值 , 根据当前的被中选的选项卡索引值 , 判断应该显示哪个组件 ; body

2.2K00
领券