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. wordpress系列1：安装

    https://wordpress.org/download/release-archive/ 官方中文网站:https://cn.wordpress.org/ readme.html文件,可查看Wo ...

  2. multimap容器和multiset容器中的find操作

    前言 multimap容器是map容器的“ 增强版 ”,它允许一个键对应多个值.对于map容器来说,find函数将会返回第一个键值匹配元素所在处的迭代器.那么对于multimap容器来说,find函数 ...

  3. 嵌入式开发之cgic库---cgi库的使用

    很幸运!用C语言写CGI程序还可以有比较简单的方式,那就是我们可以借助使用第三方库CGIC(CGIC是一个功能比较强大的支持CGI开发的标准C库,并支持Linux, Unix 和Windows等多操作 ...

  4. 三星note3 N900刷机包 4.4.2 ZSUDNE3 官方原汁原味 稳定流畅

    ROM介绍 此ROM基于最新的4.4.2 ZSUDNE3 制作,加入一些必要功能,其它性能基本与官方无差距,各方面感觉都非常不错了.此ROM本人自用,所以制作风格有点个人倾向.不论什么建议或者问题欢迎 ...

  5. 【BZOJ4950】lydsy七月月赛 C 二分图最大匹配

    [BZOJ4950]lydsy七月月赛 C 题面 题解:比较直接的想法就是:每行,每列的最大值都留下,剩下的格子都变成1.但是如果一个格子既是行的最大值又是列的最大值,那么我们只需要把它留下即可.这就 ...

  6. cocos2d-js v3新特性

    1.游戏对象 使用cc.game单例代替了原有的cc.Application以及cc.AppControl 2.属性风格API 旧的API                                ...

  7. 使用Windows API发送HTTP请求

    先看一个简单的GET示例 #include <Windows.h> #include <winhttp.h> #include <stdio.h> int main ...

  8. mongodb学习之：副本集

    前面一张介绍了主从模式,现在mongoDB官方已经不建议使用主从模式了,替代方案是采用副本集的模式.副本集不能在一台电脑上操作.需要准备3台电脑进行搭建.副本集就是mongoDB副本所组成的一个集群. ...

  9. Machine Learning in Action(5) SVM算法

    做机器学习的一定对支持向量机(support vector machine-SVM)颇为熟悉,因为在深度学习出现之前,SVM一直霸占着机器学习老大哥的位子.他的理论很优美,各种变种改进版本也很多,比如 ...

  10. PAT 天梯赛 L3-010. 是否完全二叉搜索树 【Tree】

    题目链接 https://www.patest.cn/contests/gplt/L3-010 思路 因为是 完全二叉搜索树 可以用 数据 建树的方式 然后 遍历一遍这个 数字 就是 层序遍历 遍历的 ...