Flutter踩坑记录(一)——如何使BottomNavigationBar保持状态

含泪写下这篇blog,终于找到一个简单的方法,来实现Flutter中BottomNavigationBar中保持状态,不会每次切换是重绘页面,也推荐大家使用这种方法。

1、问题引入

大家直接看图片,可以看到当我将列表滑动一段距离(滑动到第三个item),切换底部的导航栏,然后在切换回来时,列表有回到了最顶部,而控制台也打印了两次initState()方法,这说明列表被重新绘制了。
Flutter踩坑记录(一)——如何使BottomNavigationBar保持状态

这种体验显然是不好的,那么应该如何解决,避免重绘呢?请继续阅读。

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、效果

Flutter踩坑记录(一)——如何使BottomNavigationBar保持状态
可以看到,当我切换页面时,列表依然停留在底部,说明页面没有被重新绘制,bingo!!

4、其他解决方法

百度了一通,发现有关的的blog非常少,大概有两种solution,都是和Key相关的,非常苦恼的是我并没有成功。我这里直接附上原博客地址,大家可以继续参考学习: