BottomNavigationBar 底部导航条,可以很容易地在tap之间切换和浏览顶级视图。
BottomNavigationBar 显示在应用程序底部的Widget,用于在少量视图中进行选择,通常在3到5之间。
构造函数
BottomNavigationBar({
Key key,
@required this.items,
this.onTap,
this.currentIndex = 0,
BottomNavigationBarType type,
this.fixedColor,
this.iconSize = 24.0,
})
-
items → List < BottomNavigationBarItem >
BottomNavigationBar 底部导航栏中的各项,其中每个项目都是一个BottomNavigationBarItem 包含了图标和标题。 -
onTap → ValueChanged < int >
点击某一项时回调int参数为点击的具体某一项 -
currentIndex → int
指定选中的一项 -
type → BottomNavigationBarType
定义BottomNavigationBar的布局和行为– BottomNavigationBarType.fixed
每一项都固定宽并且点击时不会移动
BottomNavigationBar 的背景颜色为 ThemeData.canvasColor– BottomNavigationBarType.shifting
点击某一项时会有移动并且,只有选中的项才显示其文本标签。
BottomNavigationBar 的背景颜色与所选项的BottomNavigationBarItem.backgroundColor相同 -
fixedColor → Color
底部导航栏为的type为BottomNavigationBarType.fixed时所选中项的颜色 -
iconSize → double
所有BottomNavigationBarItem图标的大小默认24
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new HomeState();
}
}
class HomeState extends State<Home> {
BottomNavigationBar _bottomNavigationBar;
List<BottomNavigationBarItem> _items;
int _currentIndex = 0;
@override
void initState() {
super.initState();
_items = [
new BottomNavigationBarItem(
icon: new Icon(Icons.assessment),
title: new Text("test1"),
backgroundColor: Colors.green
),
new BottomNavigationBarItem(
icon: new Icon(Icons.minimize),
title: new Text("test2"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.hdr_strong),
title: new Text("test3"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.menu),
title: new Text("test4"),
),
];
}
@override
Widget build(BuildContext context) {
_bottomNavigationBar = new BottomNavigationBar(items: _items,
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.purple,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
return new MaterialApp(
title: "BottomNavigationBar",
theme: new ThemeData(primarySwatch: Colors.blue,
),
home: new Scaffold(
appBar: new AppBar(
title: new Text("BottomNavigationBar"),
),
body: new Center(
child: new Text("$_currentIndex"),
),
bottomNavigationBar: _bottomNavigationBar,
),
);
}
}