Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar、TabBar、还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失。
要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后,想再看一下下头的数据,但是Flutter给你重回页面了。。。
这谁能顶得住啊。
看了一下解释,原来Flutter中为了节约内存不会保存widget的状态,widget都是临时变量。
不过还是有很多办法解决的,网上传言用 AutomaticKeepAliveClientMixin 配合
@override
bool get wantKeepAlive => true;
服用,效果会达到保持状态。但是这个方法貌似只对TabBar起作用,BottomNavigationBar 对 AutomaticKeepAliveClientMixin 有免疫,不起作用。
后来一顿猛于虎的番羽土啬操作后,还是找到了解决方案,完美实现BottomNavigationBar底部导航栏切换,状态保持。
答案就是body使用IndexedStack即可。
参考我的代码:
import 'package:flutter/material.dart'; import './pages/home_page.dart';
import './pages/book_page.dart';
import 'package:bottom_nav_bar_test/pages/movie_page.dart';
import 'package:bottom_nav_bar_test/pages/music_page.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Navigation',
home: Main(),
theme: ThemeData(primaryColor: Colors.orange),
);
}
} class Main extends StatefulWidget {
@override
_MainState createState() => _MainState();
} class _MainState extends State<Main> {
int _currentIndex = 0;
final List<Widget> _children = [Home(), Book(), Music(), Movie()]; final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
//backgroundColor: Colors.orange
),
BottomNavigationBarItem(
icon: Icon(Icons.book),
title: Text('Book'),
//backgroundColor: Colors.orange
),
BottomNavigationBarItem(
icon: Icon(Icons.music_video),
title: Text('Music'),
//backgroundColor: Colors.orange
),
BottomNavigationBarItem(
icon: Icon(Icons.movie),
title: Text('Movie'),
//backgroundColor: Colors.orange
),
]; @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation'),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _currentIndex,
items: _list,
),
//body: _children[_currentIndex],
body: IndexedStack(
index: _currentIndex,
children: _children,
),
);
} void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
参考 https://stackoverflow.com/questions/53011686/flutter-automatickeepaliveclientmixin-is-not-working-with-bottomnavigationbar 中 hfimy 的回答。
Flutter - BottomNavigationBar底部导航栏切换后,状态丢失的更多相关文章
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部
import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...
- Flutter - TabBar导航栏切换后,状态丢失
上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...
- Flutter实战视频-移动电商-04.底部导航栏切换效果
04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
- 【Flutter学习】基本组件之BottomNavigationBar底部导航栏
一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...
- Flutter - 创建底部导航栏
之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...
- MUI底部导航栏切换效果
首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...
- Android学习总结——输入法将BottomNavigationBar(底部导航栏)顶上去的问题
在应用清单中给当前<Activity>设置: android:windowSoftInputMode="adjustPan" 关于android:windowSoftI ...
- 底部导航栏使用BottomNavigationBar
1.github地址 https://github.com/zhouxu88/BottomNavigationBar 2.基本使用 2,1添加依赖 implementation 'com.ashokv ...
随机推荐
- python网络编程:socketserver的基本使用
本文内容: socketserver的介绍 socketserver的使用 socketserver的异步服务端 首发时间:2018-03-21 也可以使用socketserver来创建socket ...
- multipart/form-data文件上传
form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式 application/x-www-form-urlencoded:默认编码方式 multipart/form-d ...
- LeetCode题解之Second Minimum Node In a Binary Tree
1.题目描述 2.问题分析 使用set. 3.代码 set<int> s; int findSecondMinimumValue(TreeNode* root) { dfs(root); ...
- JS列表
promise 引用类型/值类型 ----- 对比python可变对象/不可变对象 原型继承
- MySQL 8.0 —— 数据字典
1.简介 MySQL 8.0 将数据库元信息都存放于InnoDB存储引擎表中,在之前版本的MySQL中,数据字典不仅仅存放于特定的存储引擎表中,还存放于元数据文件.非事务性存储引擎表中.本文将会介绍M ...
- windows server 2008额外域控提升为主域控
windows server 2008额外域控提升为主域控 ---图形界面操作方法 https://blog.csdn.net/tladagio/article/details/79618338 wi ...
- C++基础算法学习——猜假币
有12枚硬币.其中有11枚真币和1枚假币.假币和真币重量不同,但不知道假币比真币轻还是重.现在,用一架天平称了这些币三次,告诉你称的结果,请你找出假币并且确定假币是轻是重(数据保证一定能找出来).例题 ...
- win10 文件扩展名的更改
win10 文件扩展名的改 随便打开一个文件夹,最好是"此电脑", 第二行是 " 文件 - 计算机 - 查看 " 在查看里面就可以更改了 ...
- break和continue语句(初学者)
1.break语句可以从循环体内跳出循环体,即提前结束循环,接着执行循环下面的语句. 一般形式:break: break不能用于循环语句和switch语句之外的任何其他语句中. 注意:(1)break ...
- pandas中DataFrame对象to_csv()方法中的encoding参数
当使用pd.read_csv()方法读取csv格式文件的时候,常常会因为csv文件中带有中文字符而产生字符编码错误,造成读取文件错误,在这个时候,我们可以尝试将pd.read_csv()函数的enco ...