Flutter BottomNavigationBar

Flutter BottomNavigationBar

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('控件'),),
        body: Container(
          width: 200,
          height: 500,
        ),
        // 底部导航栏
        bottomNavigationBar: BottomNavigatorBarDemo(),
      ),
    );
  }
}

// BottomNavigationBar
class BottomNavigatorBarDemo extends StatefulWidget {
  @override
  _BottomNavigatorBarDemoState createState() => _BottomNavigatorBarDemoState();
}

class _BottomNavigatorBarDemoState extends State<BottomNavigatorBarDemo> {

  // 当前选择的索引
  int _currentIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      // 底部按钮类型
      type: BottomNavigationBarType.fixed,
      // 按钮大小
      iconSize: 24.0,
      // 点击里按钮回调的函数
      onTap: _onItemTapped,
      // 当前索引
      currentIndex: _currentIndex,
      // 选中项的颜色
      fixedColor: Colors.red,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(title: Text('聊天'), icon: Icon(Icons.chat)),
        BottomNavigationBarItem(title: Text('消息'), icon: Icon(Icons.refresh)),
        BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person)),
      ],
    );
  }
}