04-Flutter移动电商实战-打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:
Flutter实 ViewPager、bottomNavigationBar界面切换
1、新建4个基本dart文件
在pages目录下,我们新建下面四个dart文件。
- home_page.dart :商城首页UI页面,首页相关的UI我们都会放到这个文件里。
- category_page.dart: 商城分类UI页面,这个页面会有复杂的动态组件切换。
- cart_page.dart:商城购物车UI页面,这个页面会包括购物车的全套功能。
- member_page.dart:商城会员中心页面,这个页面我们会制作会员中心的全部UI效果。
其实这一部就是建立了底部导航栏需要的四个基本页面,有了这四个基本页面就可以制作底部tab的切换功能了。
这里我只给一个页面(home_page.dart)的基础代码(后期这些代码都要更换,这里只是为了看到效果使用),然后你可以暗装一个的代码,复制到其它页面,进行修改。
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body:Center(
child: Text('商城首页'),
)
);
}
}
记得其他三个页面都进行复制,并修改类名和Text文本属性。
2、引入页面并建立List
页面创建好以后,要使用import引入到index_page.dart中,引入后才可以使用,如果不引入,VScode会很智能的报错。代码如下。
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';
引入后声明一个List型变量,这个变量主要用于切换的,我们把页面里的类,放到了这个List中。
List tabBarList = [
HomePage(),
CategoryPage(),
CartPage(),
MemberPage()
];
声明两个变量,并进行initState初始化:
- currentIndex:int类型,负责tabBodies的List索引,改变索引就相当于改变了页面。
- currentPage:利用currentIndex得到当前选择的页面,并进行呈现出来。
代码如下:
int currentIndex = 0;
var currentPage;
@override
void initState() {
currentPage = tabBarList[currentIndex];
super.initState();
}
3、build方法的编写
build方法我们会返回一个Scaffold部件,在部件里我们会添加底部导航栏,并利用onTap事件(单击事件),来改变导航栏的状态和切换页面。因为有界面变化,所以这也是要使用动态组件的原因。
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
bottomNavigationBar: BottomNavigationBar(
type:BottomNavigationBarType.fixed,
currentIndex: currentIndex,
items:bottomTabs,
onTap: (index){
setState(() {
currentIndex = index;
currentPage = tabBodies[currentIndex];
});
},
),
body:currentPage
);
}
这里有句代码type:BottomNavigationBarType.fixed,这个是设置底部tab的样式,它有两种样式fixed和shifting,只有超过3个才会有区别,国人的习惯一般是使用fixed的。感兴趣的小伙伴可以自行折腾shifting模式。
这时候就可以启动虚拟机,进行预览了。为了更好的让小伙伴们学习,在这里给出index_page.dart文件的源码。
index_page.dart文件:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';
class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
}
class _IndexPageState extends State<IndexPage> {
/** tab分组 **/
List tabBarList = [
HomePage(),
CategoryPage(),
CartPage(),
MemberPage()
];
final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.home),
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('会员中心')
),
];
int currentIndex = 0;
var currentPage;
@override
void initState() {
currentPage = tabBarList[currentIndex];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
bottomNavigationBar: BottomNavigationBar(
type:BottomNavigationBarType.fixed,
currentIndex: currentIndex,
items:bottomTabs,
onTap: (index){
setState(() {
currentIndex = index;
currentPage = tabBarList[currentIndex];
});
},
),
body:currentPage
);
}
}
效果图:
4、总结
通过这节课的学习,应该掌握如下知识点:
- 页面切换的技巧和变量如何定义。
- BottomNavigationBar部件的使用,最终作成底部切换效果。
04-Flutter移动电商实战-打通底部导航栏的更多相关文章
- Flutter移动电商实战 --(4)打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- Flutter移动电商实战 --(3)底部导航栏制作
1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...
- 使用jsonp形式跨域访问实现电商平台的左侧导航栏
电商平台有个具备的左侧商品类目的导航栏的结构. 通过jsonp跨域访问电商平台的后台管理系统商品分类.(主要实现后台Java代码) 实现基本步骤: 1.在后台管理系统中准备相应的json数据. poj ...
- Flutter移动电商实战 --(49)详细页_Stack制作底部工具栏
一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角 ...
- Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页
首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...
- Flutter移动电商实战 --(20)首页上拉加载更多功能的制作
这节课学习一下上拉加载效果,其实现在上拉加载的插件有很多,但是还没有一个插件可以说完全一枝独秀,我也找了一个插件,这个插件的优点就是服务比较好,作者能及时回答大家的问题.我觉的选插件也是选人,人对了, ...
- Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果
1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...
- Flutter移动电商实战 --(9)移动商城数据请求实战
1.URL接口管理文件建立 第一步需要在建立一个URL的管理文件,因为课程的接口会一直进行变化,所以单独拿出来会非常方便变化接口.当然工作中的URL管理也是需要这样配置的,以为我们会不断的切换好几个服 ...
- Flutter移动电商实战 --(6)dio基础_Get_Post请求和动态组件协作
上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来,当然这也是为以后的实战作基础准备,基础打牢,我们才能飞速前进. 1.案例说明 我们 ...
随机推荐
- Resouce Pool的理解
本篇文章从现象到本质再到具象去理解 , 从理论到实战再到源码回顾去深化. 1.在开发中,无处不在的池. eg 网络通信连接池: HttpClient连接池 HttpClient通过PoolingHtt ...
- 大数据之路【第十四篇】:数据挖掘--推荐算法(Mahout工具)
数据挖掘---推荐算法(Mahout工具) 一.简介 Apache顶级项目(2010.4) Hadoop上的开源机器学习库 可伸缩扩展的 Java库 推荐引擎(协同过滤).聚类和分类 二.机器学习介绍 ...
- An Illustrated Proof of the CAP Theorem
An Illustrated Proof of the CAP Theorem The CAP Theorem is a fundamental theorem in distributed syst ...
- 解决C#调用COM组件异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT)的错误
最近C#调用COM时,遇到了异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT)的错误 后面找了一下,发现是在线程里调用COM组件引起的. C++调用COM时,会调用 ...
- AutoFac的简单使用教程
Autofac可以对代码进行依赖注入,实现控制反转.以下是本菜鸟在初次入门时的代码配置,其源码,内部原理都还有待日后研究.目前也只是仅仅做到了能够使项目正常使用而已. 跟我一样刚刚入门的菜鸟朋友们可以 ...
- ConnectionString属性(网速慢的情况下研究Connect Timeout)
ConnectionString 类似于 OLE DB 连接字符串,但并不相同.与 OLE DB 或 ADO 不同,如果“Persist Security Info”值设置为 false(默认值),则 ...
- 【转载】C#中List集合使用Contains方法判断是否包含某个对象
在C#的List集合中,如果要查找List集合是否包含某一个值或者对象,如果不使用List集合类的扩展方法的话一般会使用for循环或者foreach遍历来查找,其实List集合类中的扩展方法Conta ...
- csdn 分享私藏的18个黑科技网站,想找什么软件就找什么软件!!!
https://blog.csdn.net/sinat_33921105/article/details/103307419 1.NO.1–胡萝卜周 http://www.carrotchou.blo ...
- Maven打包时集成依赖项或复制依赖项到指定目录
1.集成依赖项,最后生成的jar文件包含所有依赖: <build> <plugins> <plugin> <artifactId>maven-assem ...
- SpringBoot 传入JSON对象参数
1.请求参数格式必须是正确的JSON. 2.在入参中使用注解@RequestBody,用于接收JSON参数,使其自动转对象 3.关于lombok在此产生的一点小坑,@Builder对@RequestB ...