Flutter实战视频-移动电商-03.底部导航栏制作
03.底部导航栏制作
material是谷歌推出的
还有另外的一种:cupertino是IOS的风格
我们底部的导航栏,静态的widget是不合适的,这里我们用到动态的widget
这重新改成动态的组件
依然叫做IndexPage
声明一个List来放我们底栏的图标啊 文件啊,List我们希望是不变的,是个常量 所以我们用Final来定义
我们再复制三个BottomNavigationBarItem元素
最终代码:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'; class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
} class _IndexPageState extends State<IndexPage> {
final List<BottomNavigationBarItem> bottomTabs=[
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.home),//这里使用IOS风格的
title: Text('首页')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.search),
title: Text('分类')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.shopping_cart),
title: Text('购物车')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.profile_circled),
title: Text('会员中心')
)
];
@override
Widget build(BuildContext context) {
return Container( );
}
}
index_page.dart
Flutter实战视频-移动电商-03.底部导航栏制作的更多相关文章
- Flutter实战视频-移动电商-04.底部导航栏切换效果
04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...
- Flutter实战视频-移动电商-49.详细页_Stack制作底部工具栏
49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 ...
- Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作
55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...
- Flutter实战视频-移动电商-02.Flutter实战建立项目和编写入口文件
02.Flutter实战建立项目和编写入口文件 创建项目: flutter create flutter_shop 创建完成之后呢,它会提示我们, 进入flutter_shop的目录,然后执行flut ...
- Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作
10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...
- Flutter实战视频-移动电商-16.补充_保持页面状态
16.补充_保持页面状态 修正一个地方: 设置了item的高度为380 横向列表为380.最终build的高度也增加了50为430. 增加了上面的高度以后,下面那个横线划掉的价格可以显示出来了. 但是 ...
- Flutter实战视频-移动电商-17.首页_楼层组件的编写技巧
17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个St ...
- Flutter实战视频-移动电商-18.首页_火爆专区后台接口调试
18.首页_火爆专区后台接口调试 楼层结束之后有个火爆专区.到地图有个上拉加载的效果 lib/config/service_url.dart 首先找到我们的接口配置文件,增加接口的配置 lib/ser ...
- Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写
19.首页_火爆专区界面布局编写 看一下图片的效果 一个标题栏,下面是多行两列.里面可以用column布局,外面用Warp流式布局 有得小伙伴说这里可以用网格布局,网格布局的话还是有一定的效率问题.这 ...
随机推荐
- 宜人贷蜂巢ELK Stack之elasticsearch权限探索
前言 上文<宜人贷蜂巢API网关技术解密之Netty使用实践>提到了,API网关“承外对内”,将外部请求,转发到内部各个抓取服务.在网关中,不仅可以做鉴权.加解密.路由.限流功能:如果想了 ...
- Finder 快捷键
记录几个常用的 Finder 快捷键: 复制 Finder 里选中的路径:option+cmd+c 地址栏跳到指定路径:shift+cmd+g 增加标签:cmd+t 显示/隐藏 标签栏:shift+c ...
- jquery动态加载脚本
如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...
- redis文档翻译_LRU缓存
Using Redis as an LRU cache使用Redis作为LRU缓存 出处:http://blog.csdn.net/column/details/redisbanli.html Whe ...
- Parallel Tests
Parallel Tests Parallel Android Tests Appium provides a way for users to automate multiple Android s ...
- 负载均衡LVS
可参考:http://ixdba.blog.51cto.com/2895551/555738 http://os.51cto.com/art/201202/319979.html 也可以参考官网:ht ...
- vue axios拦截器介绍
关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...
- SDUT OJ 之 1571 《人品,有没有?》 字符串的处理问题
人品,有木有? Time Limit: 1000ms Memory limit: 32768K 有疑问?点这里^_^ 题目描述 新一届的山东理工大学ACM网络擂台赛就要开始啦!听说晋级的选手有机 ...
- Codeforces Round #401 (Div. 2) D Cloud of Hashtags —— 字符串
题目链接:http://codeforces.com/contest/777/problem/D 题解: 题意:给出n行字符串,对其进行字典序剪辑.我自己的想法是正向剪辑的,即先对第一第二个字符串进行 ...
- MySQL登陆及配置
一.mysql用户登录 mysql –u用户名 [–h主机名或者IP地址] –p密码 说明:用户名是你登录的用 户,主机名或者IP地址为可选项,如果是本地连接则不需要,远程连接需要填写,密码是对应用户 ...