BottomNavigationBar 是底部导航栏控件. 可以让我们定义底部 Tab 切换,bottomNavigationBar 是 Scaffold 组件的参数。
BottomNavigationBar 的基本属性
属性名 | 功能 | 值所属类型 |
---|---|---|
items | List<BottomNavigationBarItem> 底部导航 条按钮集合 | List<BottomNavigationBarItem> |
iconSize | 设置图标的大小 | double |
currentIndex | 默认选中第几个 | int |
onTap | 选中变化回调函数 | 回调的函数 |
fixedColor | 选中的颜色 | Color |
type | BottomNavigationBarType.fixed BottomNavigationBarType.shifting |
栗子
import 'package:flutter/material.dart';
import './pages/home.dart';
import './pages/Category.dart';
import './pages/Setting.dart';
class MainPageWidget extends StatefulWidget {
MainPageWidget({Key key}) : super(key: key);
_MainPageWidgetState createState() => _MainPageWidgetState();
}
class _MainPageWidgetState extends State<MainPageWidget> {
int _tabIndex = 0; // tab 的标记
var appBarTitles = ['首页', '发现', '我的'];
List _pageList = [
Homepage(),
CategoryPage(),
SettingPage(),
];
/*
* 获取bottomTab的颜色和文字
*/
Text getTabTitle(int curIndex) {
if (curIndex == _tabIndex) {
return new Text(appBarTitles[curIndex],
style: new TextStyle(fontSize: 14.0, color: const Color(0xff1296db)));
} else {
return new Text(appBarTitles[curIndex],
style: new TextStyle(fontSize: 14.0, color: const Color(0xff515151)));
}
}
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: this._pageList[this._tabIndex], //内容的切换
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._tabIndex, //配置对应的索引值选中
onTap: (int index) {
setState(() {
//改变状态
this._tabIndex = index;
});
},
iconSize: 36.0, //icon的大小
fixedColor: Color(0xff1296db), //选中的颜色
type: BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: getTabTitle(0)),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: getTabTitle(1)),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: getTabTitle(2))
],
),
),
);
}
}
BottomNavigationBar 的简单封装
import 'package:flutter/material.dart';
/*
*导航栏的封装
*/
class MainTabWidget extends StatefulWidget {
List<Widget> pageList; //页面
List<String> titleList = List(); // 标题,可以为空。默认为控字符串
List<Icon> iconList = List(); // 标题,可以为空。默认为控字符串
Color navBackgroundColor;
MainTabWidget(this.pageList,
{List<String> titles, List<Icon> icons, this.navBackgroundColor}) {
if (titles == null || titles.length < 1) {
for (int i = 0; i < pageList.length; i++) {
// 由于BottomNavigationBarItem必须要设置一个标题。默认给一个空字符串
titleList.add("");
}
}else{
this.titleList =titles;
}
if (icons == null || icons.length < 1) {
for (int i = 0; i < pageList.length; i++) {
// 添加默认图标-add default icon
iconList.add(Icon(Icons.home));
}
}else{
this.iconList =icons;
}
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!');
}
}
_MainTabWidgetState createState() => _MainTabWidgetState();
}
class _MainTabWidgetState extends State<MainTabWidget> {
// 保存当前选中的位置
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
body: widget.pageList[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: this._getNavItems(),
iconSize: 20.0,
// 设置当前选中位置
currentIndex: this._currentIndex,
// 点击事件->设置当前选中位置,重新刷新界面
onTap: (index) {
setState(() {
this._currentIndex = index;
});
},
// 设置BottomNavigationBar背景颜色,默认设置为白色
backgroundColor: widget.navBackgroundColor == null
? Colors.white
: widget.navBackgroundColor,
),
),
);
}
List<BottomNavigationBarItem> _getNavItems() {
List<BottomNavigationBarItem> 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;
}
}
简单的使用:
import './view/MainTabWidget.dart';
import './view/pages/home.dart';
import './view/pages/Category.dart';
import './view/pages/Setting.dart';
//程序的入口方法 D:\Program Files\Nox\bin
void main() {
// runApp 是 Fltutter 给我提供app 启动的方法,里面可以传入组件
runApp(MyApp());
}
//StatelessWidget 是一个静态组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<String> appBarTitles = ['首页', '发现', '我的'];
List<Icon> iconList = [
Icon(Icons.home),
Icon(Icons.album),
Icon(Icons.settings)
];
List<Widget> pageList = [
Homepage(),
CategoryPage(),
SettingPage(),
];
return MaterialApp(
home: MainTabWidget(pageList,
navBackgroundColor: Colors.cyan,
titles: appBarTitles,
icons: iconList));
}
}