Flutter踩坑记录(一)——如何使BottomNavigationBar保持状态
含泪写下这篇blog,终于找到一个简单的方法,来实现Flutter中BottomNavigationBar中保持状态,不会每次切换是重绘页面,也推荐大家使用这种方法。
1、问题引入
大家直接看图片,可以看到当我将列表滑动一段距离(滑动到第三个item),切换底部的导航栏,然后在切换回来时,列表有回到了最顶部,而控制台也打印了两次initState()方法,这说明列表被重新绘制了。
这种体验显然是不好的,那么应该如何解决,避免重绘呢?请继续阅读。
2、简单的解决方法
其实有一种非常简单粗暴的解决方式,使用AutomaticKeepAliveClientMixin,大家看代码。
// 首页
class Home extends StatefulWidget {
Home({Key key}) : super(key: key) {
print('new $key');
}
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with AutomaticKeepAliveClientMixin{
@override
Widget build(BuildContext context) {
return Scaffold(
...
);
}
@override
bool get wantKeepAlive => true;
}
上面的代码中,通过with AutomaticKeepAliveClientMixin
,然后重写@override bool get wantKeepAlive => true
,就实现了不重新构建的效果了。
3、效果
可以看到,当我切换页面时,列表依然停留在底部,说明页面没有被重新绘制,bingo!!
4、其他解决方法
百度了一通,发现有关的的blog非常少,大概有两种solution,都是和Key相关的,非常苦恼的是我并没有成功。我这里直接附上原博客地址,大家可以继续参考学习:
- [译]Flutter学习笔记:BottomNavigationBar实现多个Navigation https://www.jianshu.com/p/50f0cd54fe2c
- flutter实战6:TAB页面切换免重绘 https://www.jianshu.com/p/cefe49a0ab7f