开始尝试用flutter开发,flutter版本1.0,写类似微信底部tab切换界面时发现界面老被重置,网上找了一圈说保持状态需要子页面mixin AutomaticKeepAliveClientMixin,然后重写
1 |
|
但发现需要配合其他组件,不是随便mixin就有用的,尝试几种写法总结BottomNavigationBar+List
- 首先尝试BottomNavigationBar+List
实现的页面切换保持状态,一般刚开始学都会这么写:
1 | void main() => runApp(MyApp()); |
子页面代码,三个界面一样:
1 | class FirstPage extends StatefulWidget { |
结果无法实现保持页面
2.第二种BottomNavigationBar+PageView,与android的ViewPager类似,界面小改动一下,添加一个按钮,点击跳转到一个新的界面
代码如下:
1 | void main() => runApp(MyApp()); |
子界面:
1 | class FirstPage extends StatefulWidget { |
需要跳转的一个界面:
1 | class NewPage extends StatelessWidget { |
猛一看效果出来了,左右切换界面没有问题,结果跳转新界面时又出现新问题,当第一页跳转新的界面再返回,再切第二、三页发现重置了,再切回第一页发现页被重置了。
发生这种情况需要在重写Widget build(BuildContext context)时调用下父类build(context)方法,局部代码:
1 |
|
这种布局样式网上还有一种用的比较多的是BottomNavigationBar+IndexedStack( ),这边就不贴出来了
- 经过长期测试BottomNavigationBar+TabBarView方案行不通,后期会遇到其他问题,目前最好用还是viewpage和IndexedStack。
最后像这种多页面使用FloatingActionButton,用它跳转新界面是一定要设置heroTag,要不然跳转会黑屏报错