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的方法。
效果展示:
分类页面
Flutter实战视频-移动电商-04.底部导航栏切换效果的更多相关文章
- Flutter实战视频-移动电商-03.底部导航栏制作
03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的 ...
- Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作
10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...
- Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作
55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...
- Flutter实战视频-移动电商-02.Flutter实战建立项目和编写入口文件
02.Flutter实战建立项目和编写入口文件 创建项目: flutter create flutter_shop 创建完成之后呢,它会提示我们, 进入flutter_shop的目录,然后执行flut ...
- Flutter实战视频-移动电商-62.购物车_首页Provide化 让跳转随心所欲
62.购物车_首页Provide化 让跳转随心所欲 新建provide/currentIndex.dart 内容比较简单,定义一个变量当前页面的索引currentIndex,再定义一个方法改变它的值 ...
- Flutter实战视频-移动电商-37.路由_Fluro引入和商品详细页建立
37.路由_Fluro引入和商品详细页建立 https://github.com/theyakka/fluro pages/details_page.dart新建页面 使用路由 先添加路由插件的引用 ...
- Flutter实战视频-移动电商-49.详细页_Stack制作底部工具栏
49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 ...
- Flutter实战视频-移动电商-16.补充_保持页面状态
16.补充_保持页面状态 修正一个地方: 设置了item的高度为380 横向列表为380.最终build的高度也增加了50为430. 增加了上面的高度以后,下面那个横线划掉的价格可以显示出来了. 但是 ...
- Flutter实战视频-移动电商-17.首页_楼层组件的编写技巧
17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个St ...
随机推荐
- vim 宏的使用
1. 基本使用 q[a-z] 开始录制宏 q 停止录制 @[a-z] 使用宏 @@ 调用最近使用的宏 22@[a-z] 多次重放宏 2. 宏的执行方式 串行方式:5@[a-z] 宏内包含向下一个目标 ...
- iphone手机连接USB时出现须要Mobile device setup disk上的usbaapl.sys文件
问题: iphone5 手机连接USB出现例如以下弹框 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5nZWwyMnh1/font/5a6L5L2T/ ...
- 基于django做增删改查组件,分页器组件
增删改查组件 一.Djangoadmin的启发 二.基于Djangoadmin实现数据的增删改查 分页器组件 分页器组件的介绍以及源码解读 补充:源码下载,
- Memcached服务端自动启动(转载)
Memcached服务端自动启动 原文链接:http://www.cnblogs.com/technet/archive/2011/09/11/2173485.html 经测试,要使得Memcach ...
- Day20 Java Socket使用
Java中Socket的使用 client端 package org.tizen.test; import java.io.IOException; import java.io.OutputStre ...
- SAM4E单片机之旅——9、UART与MCK之MAINCK
为得到更高的带宽,需要使用更高的波特率.UART波特率的计算已经介绍过了,现在就尝试下调整外设的时钟频率.可以有多种方法调整外设时钟(MCK)的频率,这里先介绍先主要时钟(MAINCK)的设置,其中包 ...
- hdu5258简单枚举
百度之星复赛第一题.不明白这么水的题为何一堆人没过...这些人是咋晋级复赛的呢... /* * Author : ben */ #include <cstdio> #include < ...
- Struts2中的OGNL表达式
一.OGNL表达式简介 OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写,它是一个开源项目.所谓对象图,即以任意一个对象为根,通过OGNL可以访问 ...
- 推荐一个非常好的 IntelliJ IDEA 教程
教程地址:https://github.com/judasn/IntelliJ-IDEA-Tutorial 作者博客:http://www.youmeek.com/category/software- ...
- appium(8)-locator strategies
locator strategies Finding and interacting with elements Appium supports a subset of the WebDriver l ...