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. Qt在线讲座之QML脚本书写规范

    时间:2016年3月1日晚7:30 在线讲座:http://qtdream.com主页处就可以收看直播(详见主页提示) 參与对象:对Qt跨平台开发框架感兴趣的朋友们.当然了,假设你是大牛.也可以旁听一 ...

  2. 01 svn服务搭建

    一:svn服务搭建.(1)首先下载服务端svn: Setup-Subversion-1.6.5.msi(2)下载客户端svn: TortoiseSVN-1.6.6.17493-win32-svn-1. ...

  3. 代写GIS系统

    代写GIS系统,熟悉arcgis,leaflet ,百度地图等api.可以提供系统代写,技术咨询等

  4. hdu5258简单枚举

    百度之星复赛第一题.不明白这么水的题为何一堆人没过...这些人是咋晋级复赛的呢... /* * Author : ben */ #include <cstdio> #include < ...

  5. 开源流媒体客户端EasyClient手机端控制摄像机EasyCamera云台PTZ控制实现

    本文转自EasyDarwin开源团队成员kim的博客:http://blog.csdn.net/jinlong0603/article/details/51835308 EasyCamera是Easy ...

  6. 我读过的最好的epoll讲解

        首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象.     不管是文件,还是套接字,还是管道,我们都可以把他们看作流.     之后我们来讨论I ...

  7. java内部类和静态内部类的区别

    1 相同点 使用的时候,import的时候,除了包名,还要带外部类. 2 不同点 2.1 对象创建的方式不同 静态内部类创建对象的时候,独立于外部类及其对象,就好像它是一个独立的类,可以和外部类一样使 ...

  8. appium():PageObject&PageFactory

    Appium Java client has facilities which components to Page Object design pattern and Selenium PageFa ...

  9. Linux升级安装GCC G++ 6.2

    使用yum安装是不可能了,各大仓库也没有,只能自己编译安装了. 系统为CentOS 6.5,gcc为4.4.7 1 下载源代码包 当前最新版为6.2: wget http://ftp.gnu.org/ ...

  10. linux-unzip命令【转载】

    前辈 总结的很好http://www.cnblogs.com/lucyjiayou/archive/2011/12/25/2301046.html 功能说明:压缩文件. 语 法:zip [-AcdDf ...