Flutter（十八）BottomNavigationBar

flutter提供的方便的底部导航栏widget组件

属性

• items: 底部tab的具体数组
• currentIndex: _selectedIndex,//当前选中的index
• fixedColor: Colors.blue,//选中后的颜色
• onTap: _onItemTapped,//点击事件
• elevation: 20,//阴影大小 但没发现时什么效果
  -type: BottomNavigationBarType.fixed,//底部tab类型，如果是shifting只有选中的显示，并且有滚动效果。如果items中tab个数超过三个就是shifting模式了
• backgroundColor: Colors.red[200],// 底部导航栏背景色
• iconSize: 24,//tab 的icon的大小
• selectedItemColor: Colors.green, // 选中的tab的icon与title的颜色。与fixedColor互斥，效果与fixedColor貌似一样
• unselectedItemColor: Colors.black,// 非选中状态的tab的icon与title的颜色。
• selectedIconTheme: IconThemeData(color: Colors.blue,opacity: 1),// 选中的t- unselectedIconTheme: IconThemeData(color: Colors.green,opacity: 1),//非选中的tab的icon的主题，比unselectedItemColor优先级高
• selectedFontSize: 24,// 选中的tab的title的大小
• unselectedFontSize: 18,// 非选中的tab的title的大小
• selectedLabelStyle: TextStyle(color: Colors.red),// 选中的tab的title的style，优先级比selectedIconTheme低
• unselectedLabelStyle: TextStyle(color: Colors.red),//非选中的tab的title的style，优先级比unselectedIconTheme低
• showSelectedLabels: false,//是否显示选中的tab的title
• showUnselectedLabels: true,// 是否显示非选中的tab的title false 就隐藏

image.png

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //导航栏
        title: Text("App Name"),
        actions: <Widget>[
          //导航栏右侧菜单
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
        backgroundColor: Colors.red[200],
      ),
      bottomNavigationBar: BottomNavigationBar(
        // 底部导航
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
          BottomNavigationBarItem(icon: Icon(Icons.search),title: Text('search')),
          BottomNavigationBarItem(icon: Icon(Icons.delete),title: Text('delete')),
        ],
        currentIndex: _selectedIndex,//当前选中的index
//        fixedColor: Colors.blue,//选中后的颜色
        onTap: _onItemTapped,//点击事件
        elevation: 20,//阴影大小
        type: BottomNavigationBarType.fixed,//底部tab类型，如果是shifting只有选中的显示，并且有滚动效果。如果items中tab个数超过三个就是shifting模式了
        backgroundColor: Colors.red[200],// 底部导航栏背景色
        iconSize: 24,//tab 的icon的大小
        selectedItemColor: Colors.green, // 选中的tab的icon与title的颜色。与fixedColor互斥，效果与fixedColor貌似一样
        unselectedItemColor: Colors.black,// 非选中状态的tab的icon与title的颜色。
        selectedIconTheme: IconThemeData(color: Colors.blue,opacity: 1),// 选中的tab的icon的主题,比selectedItemColor优先级高
        unselectedIconTheme: IconThemeData(color: Colors.green,opacity: 1),//非选中的tab的icon的主题，比unselectedItemColor优先级高
        selectedFontSize: 24,// 选中的tab的title的大小
        unselectedFontSize: 18,// 非选中的tab的title的大小
        selectedLabelStyle: TextStyle(color: Colors.red),// 选中的tab的title的style，优先级比selectedIconTheme低
        unselectedLabelStyle: TextStyle(color: Colors.red),//非选中的tab的title的style，优先级比unselectedIconTheme低
        showSelectedLabels: false,//是否显示选中的tab的title
        showUnselectedLabels: true,// 是否显示非选中的tab的title  false 就隐藏
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

}