Flutter Material风格组件(BottomNavigationBar)

BottomNavigationBar为底部导航控件, 酷客教程Flutter 导航组件集对其也做了介绍，请大家参考。

主要属性如表所示：

下面所示代码的效果类似于微信底部导航效果：

class BottomNavigationBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _BottomNavigationBar();
}

class _BottomNavigationBar extends State<BottomNavigationBarDemo> {
  int _selectIndex = 0;
  @override
  Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
  bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    title: Text(
      '微信',
    ),
    icon: Icon(
      Icons.access_alarms,
      color: Colors.black,
    ),
    activeIcon: Icon(
      Icons.access_alarms,
      color: Colors.green,
    ),
  ),
  BottomNavigationBarItem(
    title: Text(
      '通讯录',
    ),
    icon: Icon(
      Icons.access_alarms,
      color: Colors.black,
    ),
    activeIcon: Icon(
      Icons.access_alarms,
      color: Colors.green,
    ),
  ),
  BottomNavigationBarItem(
    title: Text(
      '发现',
    ),
    icon: Icon(
      Icons.access_alarms,
      color: Colors.black,
    ),
    activeIcon: Icon(
      Icons.access_alarms,
      color: Colors.green,
    ),
  ),
  BottomNavigationBarItem(
    title: Text(
      '我',
    ),
    icon: Icon(
      Icons.access_alarms,
      color: Colors.black,
    ),
    activeIcon: Icon(
      Icons.access_alarms,
      color: Colors.green,
    ),
  ),
],
iconSize: 24,
currentIndex: _selectIndex,
onTap: (index) {
  setState(() {
    _selectIndex = index;
  });
},
fixedColor: Colors.green,
type: BottomNavigationBarType.shifting,
  ),
);
  }
}

运行效果如图所示：

酷客网相关文章：

• Flutter Material风格组件(AppBar)
• Flutter Material风格组件(Scaffold)
• Flutter Material风格组件(MaterialApp)
• Flutter容器类组件(Row和Column)