BottomNavigationBar
该Widget通常在Material design风格的页面框架Widget Scaffold中使用,作为Scaffold的一个bottomNavigationBar属性值。具体使用方法如下:
int selectedIndex = 1; final widgetOptions = [ Text('This is Home Page'), Text('This is Product Page'), Text('This is More Page'), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( //应用栏 title: Text(widget.title), ), body: widgetOptions[selectedIndex], //页面内容 bottomNavigationBar: BottomNavigationBar( //底部导航栏 items: <BottomNavigationBarItem>[ //导航栏选项集合 BottomNavigationBarItem( //底部单个导航栏选项 icon: Icon(Icons.home), //图标 title: Text('首页'), //标题 ), BottomNavigationBarItem( icon: Icon(Icons.list), title: Text('产品'), ), BottomNavigationBarItem( icon: Icon(Icons.more_horiz), title: Text('更多'), ), ], currentIndex: selectedIndex, //当前导航栏选中的索引 fixedColor: Colors.redAccent, //选中项的标题颜色 onTap: (index) { //导航栏项点击后的处理方法 setState(() { selectedIndex = index; }); }, ), ); }