Flutter底部导航栏BottomNavigationBar页面状态保持解决方案

网易云【玩转大前端】配套课程
EDU配套教程
Flutter开发的点滴积累系列文章
一行代代码置灰应用?对就是这么干

在实际应用开发中，一般应用的首页面会有这种结构，在Flutter应用开发中，有多种方式来实现这种结构布局，在《flutter底部导航栏》一文中有描述。

在这里是通过 BottomNavigationBar + BottomNavigationBarItem，然后页面主体结是通过Scaffold的body配置的动态从页面List中取Widget，也就是说先把三个tab页面存放在了List中，然后根据不同的选择标签来加载不同的页面显示

上述这种写法造成的结果就是每当切换一次页面时，对应的tab页面就会重新初始化加载一次，这样的效果，在实际应用中是体验非常不好的，同时在应用程序中也会造成资源浪费、流量浪费等种种问题。

直接上代码


///应用入口main() =>runApp(MaterialApp(home: FirstPage(),),);class FirstPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return FirstThemState();}
}
class FirstThemState extends State<FirstPage> {///选中的标签int _tabIndex =0;///图标区List<Icon> normalIcon = [Icon(Icons.home),Icon(Icons.message),Icon(Icons.people)];List<String> normalTitle =["首页","消息","我的"];List<Widget> bodyWidgetList=[ScffoldHomeItemPage(0),ScffoldHomeItemPage1(1),ScffoldHomeItemPage2(2),];@overrideWidget build(BuildContext context) {///Scaffold 用来搭建页面的主体结构return Scaffold(///页面的头部appBar: AppBar(title: Text("标题"),),///页面的主内容区///可以是单独的StatefulWidget 也可以是当前页面构建的如Text文本组件body:bodyWidgetList[_tabIndex],///底部导航栏bottomNavigationBar: buildBottomNavigation(),);}///构建底部导航栏BottomNavigationBar buildBottomNavigation(){return new BottomNavigationBar(items: <BottomNavigationBarItem>[new BottomNavigationBarItem(icon: normalIcon[0], title: Text(normalTitle[0])),new BottomNavigationBarItem(icon:  normalIcon[1], title: Text(normalTitle[1])),new BottomNavigationBarItem(icon:  normalIcon[2], title: Text(normalTitle[2])),],///显示效果type: BottomNavigationBarType.fixed,///当前选中的页面currentIndex: _tabIndex,///导航栏的背景颜色backgroundColor: Colors.white,///选中时图标与文字的颜色
//      fixedColor: Colors.deepPurple,///选中时图标与文字的颜色selectedItemColor: Colors.blue,///未选中时图标与文字的颜色unselectedItemColor: Colors.grey,///图标的大小iconSize: 24.0,///点击事件onTap: (index) {setState(() {_tabIndex = index;});},);}
}

解决方案如下


class FirstThemState extends State<FirstPage> {.... .... @overrideWidget build(BuildContext context) {///Scaffold 用来搭建页面的主体结构return Scaffold(///页面的头部appBar: AppBar(title: Text("标题"),),///页面的主内容区body:buildBodyFunction(),///底部导航栏bottomNavigationBar: buildBottomNavigation(),);}Widget buildBodyFunction(){///帧布局结合透明布局return Stack(children: <Widget>[Opacity(opacity: _tabIndex==0?1:0,child: ScffoldHomeItemPage(0),),Opacity(opacity: _tabIndex==1?1:0,child: ScffoldHomeItemPage(1),),Opacity(opacity: _tabIndex==2?1:0,child: ScffoldHomeItemPage(2),),],);}}

完毕

Flutter底部导航栏BottomNavigationBar页面状态保持解决方案相关推荐

Flutter底部导航栏BottomNavigationBar
BottomNavigationBar是底部的导航栏,一般应用在多个视图进行选择.类比于Android的底部导航栏,由Text文本和Icon图标组成. 这里创建一个List为显示内容提供容器: sta ...
Flutter 底部导航栏（Tab 页）的快速实现
Flutter 底部导航栏(Tab 页)的快速实现我们知道 Scaffold 实现了基本的 Material 布局.只要是在 Material 中定义了的单个界面显示的布局控件元素,都可以使用 Sc ...
Android底部导航栏切换页面填坑
** Android底部导航栏切换页面填坑 ** 这个效果的实现关键点就是给选项赋予两种状态,focused和normal,在主程序中用监听判断是否被选中,就给被选中的选项设focused为true, ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
Android 底部导航栏 BottomNavigationBar
大部分app,都采用导航栏的方式,无论是顶部导航栏还是底部导航栏,这是一个app的根骨,本文是采用Google最近添加到Material design中的底部导航栏BottomNavigationBa ...
Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 空袋子 ...
flutter底部导航栏
更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
vue底部导航栏（选中状态刷新不消失）解决
我们用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标是我自己找的,选中和未 ...
Flutter底部导航栏的实现
效果实现先将自动生成的main.dart里面的代码删除,并创建app.dart文件作为app的入口文件 import 'package:flutter/material.dart'; import ...

Flutter底部导航栏BottomNavigationBar页面状态保持解决方案

Flutter底部导航栏BottomNavigationBar页面状态保持解决方案相关推荐

最新文章

热门文章