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的方法。

效果展示：

分类页面

Flutter实战视频-移动电商-04.底部导航栏切换效果的更多相关文章

  1. Flutter实战视频-移动电商-03.底部导航栏制作

    03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的 ...

  2. Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

    10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...

  3. Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作

    55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...

  4. Flutter实战视频-移动电商-02.Flutter实战建立项目和编写入口文件

    02.Flutter实战建立项目和编写入口文件 创建项目: flutter create flutter_shop 创建完成之后呢,它会提示我们, 进入flutter_shop的目录,然后执行flut ...

  5. Flutter实战视频-移动电商-62.购物车_首页Provide化 让跳转随心所欲

    62.购物车_首页Provide化 让跳转随心所欲 新建provide/currentIndex.dart 内容比较简单,定义一个变量当前页面的索引currentIndex,再定义一个方法改变它的值 ...

  6. Flutter实战视频-移动电商-37.路由_Fluro引入和商品详细页建立

    37.路由_Fluro引入和商品详细页建立 https://github.com/theyakka/fluro pages/details_page.dart新建页面 使用路由 先添加路由插件的引用 ...

  7. Flutter实战视频-移动电商-49.详细页_Stack制作底部工具栏

    49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 ...

  8. Flutter实战视频-移动电商-16.补充_保持页面状态

    16.补充_保持页面状态 修正一个地方: 设置了item的高度为380 横向列表为380.最终build的高度也增加了50为430. 增加了上面的高度以后,下面那个横线划掉的价格可以显示出来了. 但是 ...

  9. Flutter实战视频-移动电商-17.首页_楼层组件的编写技巧

    17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个St ...

随机推荐

  1. PS 魔法棒

    魔术棒工具是通过选取图像中颜色相近或大面积单色区域的像素来制作选区,魔术棒用于纯色背景中较多. 容差数值越大,选择出的选区就越大,容差越小,对颜色差别的要求也就越严格,选择出的选区也就越小 按住shi ...

  2. adb的经常使用命令(android debud bridge)

    android调试桥: adb命令使用须要在系统环境遍历中path中追加adb.exe的完整路径D:\IDE\adt-bundle-windows-x86-20130729\sdk\platform- ...

  3. OpenWrt：路由器上的Linux

    官网:https://openwrt.org/ 适于嵌入式设备的一个Linux发行版,可刷无线路由器. 相对原厂固件而言,OpenWrt不是一个单一.静态的固件,而是提供了一个可添加软件包的可写的文件 ...

  4. 获取iOS系统版本号，慎重使用[[[UIDevice currentDevice] systemVersion] floatValue]——【sdk缺陷】

    iOS 最常见的获取系统版本的方法是: [[[UIDevice currentDevice] systemVersion] floatValue] 可是.这个floatValue是不靠谱的,这也算是i ...

  5. babylon使用3dsmax导出的obj文件时模型偏暗

    将模型的material的diffuseTexture设置为null即可

  6. springboot实战--笔记

    由于这本书看过一遍,所以这里是二次复习,记录的东西比较少,就不分章节了. 共12章,524页,预计时间是18h 第一章 spring基础: 第二章 spring常用配置: bean的Scope:sin ...

  7. SAM4E单片机之旅——3、LED闪烁之定时器中断

    让一个LED灯闪烁不过瘾,我们应该让这块开发板完成一点更高难度的任务:比如让两个LED灯闪烁. …… 当然了,以我们的现在使用的空循环技术,还是可以实现这点的.但是这样显得略为低端.所以我们使用一个高 ...

  8. EasyDarwin开源流媒体社区视频教程

    EasyDarwin开源社区出视频教程了,经过几个深夜的努力,终于将第一次课程的5个课时的视频教程录好<EasyDarwin开源流媒体服务器:编译.配置.部署>,EasyDarwin后面会 ...

  9. grouped differently across partitions

    [熵增] 由无序到有序 http://spark.apache.org/docs/latest/rdd-programming-guide.html#shuffle-operations Shuffl ...

  10. Hadoop集群搭建-Hadoop2.8.0安装(三)

    一.准备安装介质 a).hadoop-2.8.0.tar b).jdk-7u71-linux-x64.tar 二.节点部署图 三.安装步骤 环境介绍: 主服务器ip:192.168.80.128(ma ...