android仿京东底部导航菜单,flutter封装组件底部导航栏BottomNavigationBar

开发工具&＃xff1a;

Android Studio 3.4.1

介绍&＃xff1a;

flutter里可以理解为 万物皆组件(Widget)&＃xff0c;类似于Java的万物皆对象(Object)&＃xff1b;

通过对组件的封装&＃xff0c;后期可快速实现出对应的界面效果&＃xff0c;同时&＃xff0c;还可知己移植到其他项目&＃xff0c;重复使用&＃xff1b;

目的&＃xff1a;

可移植

使用频率高

快速构建

通常底部导航栏是目前主流app通用的一种布局方式&＃xff0c;比如说微信、qq、支付宝、京东、思否&＃xff1b;

所以将此布局封装出来&＃xff0c;以后使用的时候&＃xff0c;几行代码就能搭建出来&＃xff1b;

效果图

实现的代码

红色区域&＃xff1a;

pageList是内容界面&＃xff0c;有三个&＃xff1b;

一行代码便实现了底部导航栏效果&＃xff1b;

自定义TabWidget

封装的详细代码如下&＃xff0c;可能还不够完善&＃xff0c;后期再慢慢修改。

基本上都写了注释。。应该还是挺好理解的&＃xff1b;

import &＃39;package:flutter/material.dart&＃39;;

class TabWidget extends StatefulWidget {

// 页面

List pageList;

// 标题&＃xff0c;可以为空。默认为控字符串

List titleList &＃61; List();

// 图标 可以为空。默认为home

List iconList &＃61; List();

Color navBackgroundColor;

TabWidget(this.pageList,{List titles,List icons,this.navBackgroundColor}){

if(titles &＃61;&＃61; null || titles.length<1){

for(int i&＃61;0;i

// 由于BottomNavigationBarItem必须要设置一个标题。默认给一个空字符串

titleList.add("");

}

}

if(icons &＃61;&＃61; null || icons.length<1){

for(int i&＃61;0;i

// 添加默认图标-add default icon

iconList.add(Icon(Icons.home));

}

}

if(pageList &＃61;&＃61; null || pageList.length<1){

// 内容界面为空&＃xff0c;抛出 异常

throw FormatException(&＃39;one page at least!&＃39;);

}

if(pageList &＃61;&＃61; null || pageList.length<1 || pageList.length!&＃61;titleList.length || pageList.length!&＃61;iconList.length){

// 内容界面数量、标题数量、图标数量不一致&＃xff0c;抛出异常。

throw FormatException(&＃39;data list is null or not equal!&＃39;);

}

}

&＃64;override

_TabWidgetState createState() &＃61;> _TabWidgetState();

}

class _TabWidgetState extends State {

// 保存当前选中的位置

int _currentIndex &＃61; 0;

&＃64;override

Widget build(BuildContext context) {

return Container(

child: Scaffold(

body: widget.pageList[_currentIndex],

bottomNavigationBar: BottomNavigationBar(

// 条目

items: this._getNavItems(),

// 设置当前选中位置

currentIndex: this._currentIndex,

// 点击事件->设置当前选中位置,重新刷新界面

onTap: (index){

setState(() {

this._currentIndex &＃61; index;

});

},

// 设置BottomNavigationBar背景颜色&＃xff0c;默认设置为白色

backgroundColor: widget.navBackgroundColor &＃61;&＃61; null ? Colors.white: widget.navBackgroundColor,

),

),

);

}

List _getNavItems(){

List items &＃61; List();

for(int i&＃61;0;i

items.add(BottomNavigationBarItem(

icon: widget.iconList[i],

title:Text( widget.titleList[i]),

)

);

}

return items;

}

}

完整项目地址

项目代码&＃xff1a;github地址--->机票

总结

关注flutter挺长一段时间了。最近才开始试着写代码&＃xff0c;有什么不对的地方&＃xff0c;各位大佬请轻喷&＃xff0c;O(∩_∩)O哈哈~