Flutter踩坑记录（一）——如何使BottomNavigationBar保持状态

我会带着你远行 2022-05-12 14:08 157阅读 0赞

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

### 1、问题引入 ###

大家直接看图片，可以看到当我将列表滑动一段距离（滑动到第三个item），切换底部的导航栏，然后在切换回来时，列表又回到了最顶部，而控制台也打印了两次initState()方法，这说明列表被重新绘制了。  
![在这里插入图片描述][70]

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

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

![在这里插入图片描述][70 1]  
可以看到，当我切换页面时，列表依然停留在底部，说明页面没有被重新绘制，bingo！！

### 4、其他解决方法 ###

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

*  \[译\]Flutter学习笔记：BottomNavigationBar实现多个Navigation [https://www.jianshu.com/p/50f0cd54fe2c][https_www.jianshu.com_p_50f0cd54fe2c]
 *  flutter实战6：TAB页面切换免重绘 [https://www.jianshu.com/p/cefe49a0ab7f][https_www.jianshu.com_p_cefe49a0ab7f]

欢迎加我微信，一起交流，互相学习，共同进步！

![在这里插入图片描述][20190315083734931.jpg]  
关注公众号『嗜码』。回复关键字「前端」、「Python」、「Java」、「Android」、「小程序」、「Vue」等获取免费精品学习资料。  
![在这里插入图片描述][20190315083756375.png]

[70]: /images/20220504/37c11707e2f5474daa29a6afd86974a0.png
[70 1]: /images/20220504/df4736bee02a4b49bebc2e1371c73c02.png
[https_www.jianshu.com_p_50f0cd54fe2c]: https://www.jianshu.com/p/50f0cd54fe2c
[https_www.jianshu.com_p_cefe49a0ab7f]: https://www.jianshu.com/p/cefe49a0ab7f
[20190315083734931.jpg]: /images/20220504/0885e3a0553140a9ac805bf51db31c05.png
[20190315083756375.png]: /images/20220504/e8f8ca5127634d10a8c13c0b5922c29d.png