Flutter笔记5：BottomNavigationBar底部导航栏详解

BottomNavigationBar是设置底部导航栏的wiget，和BottomAppBar很相似，通过BottomNavigationBarType属性，有两种选中样式可选，一种是改变颜色表示选中效果，一种是通过是否显示文字体现出来：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomAppBar组件',
      home: Scaffold(
        appBar: AppBar(title: Text('BottomAppBar组件')),
        //底部导航栏BottomNavigationBar
        bottomNavigationBar: DemoPage(),
      ),
    );
  }
}

class DemoPage extends StatefulWidget {
  DemoPage({Key key}) : super(key: key);

  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  //默认当前选中的项
  int _currentIndex = 0;
  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // return BottomNavigationBar(
    //   //底部按钮类型 fixed  图标下文字始终显示
    //   type: BottomNavigationBarType.fixed,
    //   //按钮大小
    //   iconSize: 20.0,
    //   //按钮点击事件
    //   onTap: _onItemTapped,
    //   //当前选中项
    //   currentIndex: _currentIndex,
    //   //当BottomNavigationBarType时，选中的颜色
    //   fixedColor: Colors.orange,
    //   items: <BottomNavigationBarItem>[
    //     BottomNavigationBarItem(title: Text('聊天'), icon: Icon(Icons.chat)),
    //     BottomNavigationBarItem(title: Text('朋友圈'), icon: Icon(Icons.refresh)),
    //     BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person)),
    //   ],
    // );
    return BottomNavigationBar(
      //底部按钮类型 shifting 移位样式 图标下文字选中时显示
      type: BottomNavigationBarType.shifting,
      //按钮大小
      iconSize: 20.0,
      //按钮点击事件
      onTap: _onItemTapped,
      //当前选中项
      currentIndex: _currentIndex,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
            title: Text(
              '聊天',
              style: TextStyle(color: Colors.red),
            ),
            icon: Icon(
              Icons.chat,
              color: Colors.red,
            )),
        BottomNavigationBarItem(
            title: Text('朋友圈', style: TextStyle(color: Colors.red)),
            icon: Icon(Icons.refresh, color: Colors.red)),
        BottomNavigationBarItem(
            title: Text('我的', style: TextStyle(color: Colors.red)),
            icon: Icon(Icons.person, color: Colors.red)),
      ],
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！