BottomNavigationBar

bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用

bottomNavigationBar

BottomNavigationBar({
    Key key,
    @required this.items,  
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.fixedColor,
    this.iconSize = 24.0,
  })

属性	值类型	说明
items	BottomNavigationBarItem类型的List	底部导航栏的显示项
onTap	ValueChanged < int >	点击导航栏子项时的回调
currentIndex	int	默认选中第几个
type	BottomNavigationBarType	底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样,shifting时backgroundColor 属性有效
fixedColor	Color	底部导航栏type为fixed时导航栏的颜色，如果为空的话默认使用ThemeData.primaryColor
iconSize	double	BottomNavigationBarItem icon的大小

BottomNavigationBarItem

const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  })

属性	值类型	说明
icon	Widget	要显示的图标控件，一般都是Iocn
title	Widget	要显示的标题控件，一般都是Text
activeIcon	Widget	选中时要显示的icon，一般也是Icon
backgroundColor	Color	BottomNavigationBarType为shifting时的背景颜色

BottomNavigationBarType为shifting

2019-12-18 14.23.53.gif

BottomNavigationBarType为fixed

2019-12-18 14.26.18.gif

class IndexPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return IndexState();
  }
}

class IndexState extends State {
  int currentIndex;
  final pages = [HomePage(), MessagePage(), CartPage(), MinePage()];
  List<BottomNavigationBarItem> navigations = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      title: Text("首页"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      title: Text("消息"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      title: Text("购物车"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      title: Text("个人中心"),
    ),
  ];

  changeIndex(int index) {
    if (currentIndex != index) {
      setState(() {
        currentIndex = index;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: pages[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentIndex,
          type: BottomNavigationBarType.shifting,
          iconSize: 24,
          onTap: (index) {
            changeIndex(index);
          },
          items: navigations),
    );
  }
}