android仿京东底部导航菜单,flutter-封装组件-底部导航栏-BottomNavigationBar
开发工具：
Android Studio 3.4.1
介绍：
flutter里可以理解为 万物皆组件(Widget)，类似于Java的万物皆对象(Object)；
通过对组件的封装，后期可快速实现出对应的界面效果，同时，还可知己移植到其他项目，重复使用；
目的：
可移植
使用频率高
快速构建
通常底部导航栏是目前主流app通用的一种布局方式，比如说微信、qq、支付宝、京东、思否；
所以将此布局封装出来，以后使用的时候，几行代码就能搭建出来；
效果图
实现的代码
红色区域：
pageList是内容界面，有三个；
一行代码便实现了底部导航栏效果；
自定义TabWidget
封装的详细代码如下，可能还不够完善，后期再慢慢修改。
基本上都写了注释。。应该还是挺好理解的；
import 'package:flutter/material.dart';
class TabWidget extends StatefulWidget {
// 页面
List pageList;
// 标题，可以为空。默认为控字符串
List titleList = List();
// 图标 可以为空。默认为home
List iconList = List();
Color navBackgroundColor;
TabWidget(this.pageList,{List titles,List icons,this.navBackgroundColor}){
if(titles == null || titles.length<1){
for(int i=0;i
// 由于BottomNavigationBarItem必须要设置一个标题。默认给一个空字符串
titleList.add("");
}
}
if(icons == null || icons.length<1){
for(int i=0;i
// 添加默认图标-add default icon
iconList.add(Icon(Icons.home));
}
}
if(pageList == null || pageList.length<1){
// 内容界面为空，抛出 异常
throw FormatException('one page at least!');
}
if(pageList == null || pageList.length<1 || pageList.length!=titleList.length || pageList.length!=iconList.length){
// 内容界面数量、标题数量、图标数量不一致，抛出异常。
throw FormatException('data list is null or not equal!');
}
}
@override
_TabWidgetState createState() => _TabWidgetState();
}
class _TabWidgetState extends State {
// 保存当前选中的位置
int _currentIndex = 0;
@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 = index;
});
},
// 设置BottomNavigationBar背景颜色，默认设置为白色
backgroundColor: widget.navBackgroundColor == null ? Colors.white: widget.navBackgroundColor,
),
),
);
}
List _getNavItems(){
List items = List();
for(int i=0;i < widget.titleList.length;i++){
items.add(BottomNavigationBarItem(
icon: widget.iconList[i],
title:Text( widget.titleList[i]),
)
);
}
return items;
}
}
完整项目地址
项目代码：github地址--->机票
总结
关注flutter挺长一段时间了。最近才开始试着写代码，有什么不对的地方，各位大佬请轻喷，O(∩_∩)O哈哈~