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 {@overrideWidget 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;@overridevoid initState() {currentPage = tabBarList[currentIndex];super.initState();}

3、build方法的编写

build方法我们会返回一个Scaffold部件，在部件里我们会添加底部导航栏，并利用onTap事件(单击事件),来改变导航栏的状态和切换页面。因为有界面变化，所以这也是要使用动态组件的原因。

  @overrideWidget 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;@overridevoid initState() {currentPage = tabBarList[currentIndex];super.initState();}@overrideWidget 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部件的使用，最终作成底部切换效果。

posted @ 2019-06-14 20:45 niceyoo 阅读(...) 评论(...) 编辑收藏

04-Flutter移动电商实战-打通底部导航栏相关推荐

Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
android底部导航栏中间凸起,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标...
仿闲鱼底部导航栏带有中间凸起图标刚接触Flutter,需要实现一个类似闲鱼APP的底部导航栏的实现要实现的效果如图: 好的,下面开始上代码了: 一. 在main.dart文件中,定义APP的入口信 ...
闲鱼底部tab android,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
image 霸图镇楼仿闲鱼底部导航栏带有中间凸起图标需求情景: 需要实现一个类似闲鱼APP的底部导航栏的实现要实现的效果如图 image 好的,下面开始上代码了: 一. 在main.dart文件 ...
Flutter移动电商实战 --（14）首页_拨打电话操作
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块这个小伙伴们一定轻车熟路了, ...
01-Flutter移动电商实战-项目学习记录
01-Flutter移动电商实战-项目学习记录一直想系统性的学习一下 Flutter,正好看到该课程<Flutter移动电商实战>的百度云资源,共 69 课时,由于怕自己坚持不下去(经常 ...
flutter底部导航栏
更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
03-Flutter移动电商实战-底部导航栏制作
03-Flutter移动电商实战-底部导航栏制作 1.cupertino_IOS风格介绍在Flutter里是有两种内置风格的: material风格: Material Design 是由 Goog ...
微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...
12-Flutter移动电商实战-首页导航区域编写
12-Flutter移动电商实战-首页导航区域编写 1.导航单元素的编写从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套 ...

04-Flutter移动电商实战-打通底部导航栏

04-Flutter移动电商实战-打通底部导航栏

04-Flutter移动电商实战-打通底部导航栏相关推荐

最新文章

热门文章