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. Machine Learning： 一部气势恢宏的人工智能发展史

    转载自:雷锋网 本文作者:陈圳 2016-09-12 09:46 导语:机器学习的从产生,发展,低潮和全盛的历史 雷锋网(公众号:雷锋网)按:本文作者DataCastle数据城堡,主要介绍了机器学习的 ...

  2. FFmpeg Basics阅读笔记1：介绍

    Multimedia handling with a fast audio and video encoder 作者:Frantisek Korbel 网址:http://ffmpeg.tv/ FFm ...

  3. MongoDB 操作手冊CRUD 事务 两步提交

    运行两步提交 概述 这部分提供了多记录更新或者多记录事务.使用两步提交来完毕多记录写入的模板. 另外.能够扩展此方法来提供rollback-like功能. 背景 MongoDB对于单条记录的操作是原子 ...

  4. PHP收邮件receiveMail

    用PHP来发邮件,相信大家都不陌生,但读取收件箱的话,接触就少了,这次总结下自己的经验,希望能够帮助大家. 注意:1.PHP读取收件箱主要是利用imap扩展,所以在使用下面方法前,必须开启imap扩展 ...

  5. 【原创】Sublime Text 3快捷配置c++的编译，运行，gdb环境

    打开Tools ->Build System -> New Build System 弹出一个文件,将原有的东西删掉,输入: { "encoding": "u ...

  6. SpringInAction4笔记——复习

    由于目前只做后端的业务代码的开发,所以根据自己掌握的熟悉程度,只需要复习几个模块即可 重点看的是核心容器(IOC),redis,缓存,消息(主要是rabbitmq),事务,springboot,单元测 ...

  7. asp概述

    asp的理解 今天才知道,Asp原来不是一种语言,也不是一种开发工具,而是一种技术框架, 主要功能是把脚本语言,HTML,组件和Web数据库访问功能有机的结合在一起, 形成一个能在服务器端运行的应用程 ...

  8. html5 canvas基本用法

    通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅 <!doctype html> <html> <head> <m ...

  9. 关于mybatis的学习笔记

    配置文件 贴出mybatis的配置文件,这里mybatis还未与spring做整合: <?xml version="1.0" encoding="UTF-8&quo ...

  10. Codeforces Round #401 (Div. 2) C Alyona and Spreadsheet —— 打表

    题目链接:http://codeforces.com/contest/777/problem/C C. Alyona and Spreadsheet time limit per test 1 sec ...