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.底部导航栏制作的更多相关文章

  1. Flutter实战视频-移动电商-04.底部导航栏切换效果

    04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...

  2. Flutter实战视频-移动电商-49.详细页_Stack制作底部工具栏

    49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 ...

  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实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

    10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...

  6. Flutter实战视频-移动电商-16.补充_保持页面状态

    16.补充_保持页面状态 修正一个地方: 设置了item的高度为380 横向列表为380.最终build的高度也增加了50为430. 增加了上面的高度以后,下面那个横线划掉的价格可以显示出来了. 但是 ...

  7. Flutter实战视频-移动电商-17.首页_楼层组件的编写技巧

    17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个St ...

  8. Flutter实战视频-移动电商-18.首页_火爆专区后台接口调试

    18.首页_火爆专区后台接口调试 楼层结束之后有个火爆专区.到地图有个上拉加载的效果 lib/config/service_url.dart 首先找到我们的接口配置文件,增加接口的配置 lib/ser ...

  9. Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

    19.首页_火爆专区界面布局编写 看一下图片的效果 一个标题栏,下面是多行两列.里面可以用column布局,外面用Warp流式布局 有得小伙伴说这里可以用网格布局,网格布局的话还是有一定的效率问题.这 ...

随机推荐

  1. 宜人贷蜂巢ELK Stack之elasticsearch权限探索

    前言 上文<宜人贷蜂巢API网关技术解密之Netty使用实践>提到了,API网关“承外对内”,将外部请求,转发到内部各个抓取服务.在网关中,不仅可以做鉴权.加解密.路由.限流功能:如果想了 ...

  2. Finder 快捷键

    记录几个常用的 Finder 快捷键: 复制 Finder 里选中的路径:option+cmd+c 地址栏跳到指定路径:shift+cmd+g 增加标签:cmd+t 显示/隐藏 标签栏:shift+c ...

  3. jquery动态加载脚本

    如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...

  4. redis文档翻译_LRU缓存

    Using Redis as an LRU cache使用Redis作为LRU缓存 出处:http://blog.csdn.net/column/details/redisbanli.html Whe ...

  5. Parallel Tests

    Parallel Tests Parallel Android Tests Appium provides a way for users to automate multiple Android s ...

  6. 负载均衡LVS

    可参考:http://ixdba.blog.51cto.com/2895551/555738 http://os.51cto.com/art/201202/319979.html 也可以参考官网:ht ...

  7. vue axios拦截器介绍

    关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...

  8. SDUT OJ 之 1571 《人品,有没有?》 字符串的处理问题

    人品,有木有? Time Limit: 1000ms   Memory limit: 32768K  有疑问?点这里^_^ 题目描述 新一届的山东理工大学ACM网络擂台赛就要开始啦!听说晋级的选手有机 ...

  9. Codeforces Round #401 (Div. 2) D Cloud of Hashtags —— 字符串

    题目链接:http://codeforces.com/contest/777/problem/D 题解: 题意:给出n行字符串,对其进行字典序剪辑.我自己的想法是正向剪辑的,即先对第一第二个字符串进行 ...

  10. MySQL登陆及配置

    一.mysql用户登录 mysql –u用户名 [–h主机名或者IP地址] –p密码 说明:用户名是你登录的用 户,主机名或者IP地址为可选项,如果是本地连接则不需要,远程连接需要填写,密码是对应用户 ...