04.底部导航栏切换效果

博客地址:

https://jspang.com/post/FlutterShop.html#toc-291

我们要做的效果图:

 

 Flutter实战视频-移动电商-04.底部导航栏切换效果

 

新建四个页面

Flutter实战视频-移动电商-04.底部导航栏切换效果

home_page.dart

home_page.dart为了展示切换效果,所以代码比较简单。中间放个Center,center里面再放一个Text文本就可以了。

Flutter实战视频-移动电商-04.底部导航栏切换效果

剩下的企业几个页面都做相应的复制就可以了。

分类页面

Flutter实战视频-移动电商-04.底部导航栏切换效果

 

购物车页面

Flutter实战视频-移动电商-04.底部导航栏切换效果

 

会员中心页面

Flutter实战视频-移动电商-04.底部导航栏切换效果

 

IndexPage页面引入四个子页面

Flutter实战视频-移动电商-04.底部导航栏切换效果

引入四个页面以后,需要定义一个List变量。把四个页面加到数组里面

Flutter实战视频-移动电商-04.底部导航栏切换效果

再声明两个变量,分别存放索引值,和当前的page页面

Flutter实战视频-移动电商-04.底部导航栏切换效果

 

然后需要在我们的initState方法内初始化。我们重写initState方法

Flutter实战视频-移动电商-04.底部导航栏切换效果

开始写build主方法:

动态组件要改变索引的值,必须用setState的方法。

Flutter实战视频-移动电商-04.底部导航栏切换效果

 

 

Flutter实战视频-移动电商-04.底部导航栏切换效果

 

效果展示:

Flutter实战视频-移动电商-04.底部导航栏切换效果

分类页面

Flutter实战视频-移动电商-04.底部导航栏切换效果

https://github.com/zhengeili/flutter_shop/tree/code04

 

相关文章:

  • 2021-05-10
  • 2021-09-23
  • 2021-12-25
  • 2021-12-19
  • 2022-12-23
  • 2021-08-14
  • 2021-08-31
猜你喜欢
  • 2021-11-15
  • 2021-06-26
  • 2021-11-14
  • 2022-01-07
  • 2022-02-21
  • 2021-12-04
  • 2021-05-23
相关资源
相似解决方案