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

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

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

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

    在 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.5K20

    flutter鸿蒙版本通过底部导航栏的实现熟悉架构及语法

    写在前面 在这篇博客中,我们将深入分析一个 Flutter 应用的完整代码,该应用实现了一个底部导航栏,允许用户在不同页面之间切换。...在 build 方法中,我们构建了一个 MaterialApp,这是 Flutter 应用的核心组件,提供了应用的主题、路由等设置。...当用户点击某个导航项时,这个方法会被调用,并通过 setState 方法更新 _selectedIndex,触发界面重建,从而显示新选中的页面。 6....onTap 属性将点击事件绑定到 _onItemTapped 方法,使得点击导航项时可以更新状态和切换页面。 7....: _onItemTapped, // 点击事件 ), ); } } 写在最后 通过这段代码,我们构建了一个基本的 Flutter 应用,包含了底部导航栏,可以在不同页面之间进行切换

    10210

    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 中使用 NavigationRail 和 BottomNavigationBar【Flutter专题33】

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

    2.2K50

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

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

    1.9K41

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

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

    6.2K50

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

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

    4.5K20

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

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

    47810

    Flutter加载本地HTML的优雅解决方案:轻松实现富文本展示

    Flutter加载本地HTML有以下几个应用场景: 显示包含图文并茂的内容 嵌入交互表单或媒体内容 支持复杂排版的新闻类文章 如何加载本地HTML 为了在Flutter中加载HTML内容,我们可以借助WebView...第一步:安装WebView插件 在项目的pubspec.yaml文件中添加依赖: dependencies: flutter: sdk: flutter webview_flutter:...创建一个新的页面,例如LocalHtmlPage.dart,并添加以下代码: import 'package:flutter/material.dart'; import 'package:webview_flutter.../material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class LocalHtmlPage extends...HTML文件作为一种灵活、易维护的富文本展示方式,能有效提升Flutter应用的内容呈现能力。 这种方法在展示新闻、资讯或帮助文档等内容时非常有用,能够让开发者灵活调整内容的样式和排版。

    31810

    【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.4K00
    领券