Flutter BottomNavigationBar:底部导航栏

Scaffold 下的 bottomNavigationBar,他的属性 items 必须大于 1,否则会报错。

class Home extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            title: Text('Muzico'),
            elevation: 0.0,
            bottom: TabBar(
              unselectedLabelColor: Colors.black38,
              indicatorColor: Colors.green,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorWeight: 5.0,
              tabs: <Widget>[
                Tab(icon: Icon(Icons.local_bar),),
                Tab(icon: Icon(Icons.local_cafe),),
                Tab(icon: Icon(Icons.local_offer),),
              ],
            ),
            ),
            body: TabBarView(
              children: <Widget>[
                Icon(Icons.local_bar, size: 128.0, color: Colors.black12,),
                Icon(Icons.local_cafe, size: 128.0, color: Colors.black12,),
                Icon(Icons.local_offer, size: 128.0, color: Colors.black12,),
              ],
            ),
            drawer: DrawerDemo(),
            bottomNavigationBar: BottomNavigationBar(
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.edit),
                  title: Text('edit'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.cached),
                  title: Text('cached'),
                ),
              ],
            ),
        ),
      );
    }
}

D0709BEC-6C46-4E48-8BEF-816BE500F5CA

当 items 达到四个的时候,会变成白色,什么都没有,这个时候需要设置

type: BottomNavigationBarType.fixed,
class Home extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            title: Text('Muzico'),
            elevation: 0.0,
            bottom: TabBar(
              unselectedLabelColor: Colors.black38,
              indicatorColor: Colors.green,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorWeight: 5.0,
              tabs: <Widget>[
                Tab(icon: Icon(Icons.local_bar),),
                Tab(icon: Icon(Icons.local_cafe),),
                Tab(icon: Icon(Icons.local_offer),),
              ],
            ),
            ),
            body: TabBarView(
              children: <Widget>[
                Icon(Icons.local_bar, size: 128.0, color: Colors.black12,),
                Icon(Icons.local_cafe, size: 128.0, color: Colors.black12,),
                Icon(Icons.local_offer, size: 128.0, color: Colors.black12,),
              ],
            ),
            drawer: DrawerDemo(),
            bottomNavigationBar: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.edit),
                  title: Text('edit'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.cached),
                  title: Text('cached'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.save),
                  title: Text('save'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.face),
                  title: Text('face'),
                ),
              ],
            ),
        ),
      );
    }
}

18849B14-931F-45C6-9A75-EB2C24BEABB3

通过 fixedColor属性可以修改选中的颜色:

fixedColor: Colors.red,
class Home extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            title: Text('Muzico'),
            elevation: 0.0,
            bottom: TabBar(
              unselectedLabelColor: Colors.black38,
              indicatorColor: Colors.green,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorWeight: 5.0,
              tabs: <Widget>[
                Tab(icon: Icon(Icons.local_bar),),
                Tab(icon: Icon(Icons.local_cafe),),
                Tab(icon: Icon(Icons.local_offer),),
              ],
            ),
            ),
            body: TabBarView(
              children: <Widget>[
                Icon(Icons.local_bar, size: 128.0, color: Colors.black12,),
                Icon(Icons.local_cafe, size: 128.0, color: Colors.black12,),
                Icon(Icons.local_offer, size: 128.0, color: Colors.black12,),
              ],
            ),
            drawer: DrawerDemo(),
            bottomNavigationBar: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              fixedColor: Colors.red,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.edit),
                  title: Text('edit'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.cached),
                  title: Text('cached'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.save),
                  title: Text('save'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.face),
                  title: Text('face'),
                ),
              ],
            ),
        ),
      );
    }
}

3E6FB093-37C3-4738-AA7B-EA5AB8DC7D7F