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

04.底部导航栏切换效果

博客地址：

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

咱们要作的效果图：

 

 

 

新建四个页面

home_page.dart

home_page.dart为了展现切换效果，因此代码比较简单。中间放个Center，center里面再放一个Text文本就能够了。

剩下的企业几个页面都作相应的复制就能够了。

分类页面

 

购物车页面

 

会员中心页面

 

IndexPage页面引入四个子页面

引入四个页面之后，须要定义一个List变量。把四个页面加到数组里面

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

 

而后须要在咱们的initState方法内初始化。咱们重写initState方法

开始写build主方法:

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

 

 

 

效果展现：

分类页面