flutter使用BottomNavigationBar 切换页

2019-08-02  本文已影响0人  Maaaaxi

直接上代码吧

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomeState();
  }
}

class HomeState extends State<HomePage> {
  List<Widget> pages = List();
  var _currentIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    pages
      ..add(MusicPage())
      ..add(RadioPage())
      ..add(VideoPage())
      ..add(UserPage());
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        iconSize: 24,
        currentIndex: _currentIndex,
        fixedColor: Config.titleBarColor,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.queue_music),
              title: Text(
                IntlUtil.getString(context, Ids.bottom_bar_music),
                style: TextStyle(fontSize: 14),
              )),
          BottomNavigationBarItem(
              icon: Icon(Icons.radio),
              title: Text(
                IntlUtil.getString(context, Ids.bottom_bar_radio),
                style: TextStyle(fontSize: 14),
              )),
          BottomNavigationBarItem(
              icon: Icon(Icons.ondemand_video),
              title: Text(
                IntlUtil.getString(context, Ids.bottom_bar_video),
                style: TextStyle(fontSize: 14),
              )),
          BottomNavigationBarItem(
              icon: Icon(Icons.supervised_user_circle),
              title: Text(
                IntlUtil.getString(context, Ids.bottom_bar_user),
                style: TextStyle(fontSize: 14),
              )),
        ],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}
上一篇下一篇

猜你喜欢

热点阅读