美文网首页
flutter使用BottomNavigationBar 切换页

flutter使用BottomNavigationBar 切换页

作者: Maaaaxi | 来源:发表于2019-08-02 16:10 被阅读0次

    直接上代码吧

    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;
              });
            },
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter使用BottomNavigationBar 切换页

          本文链接:https://www.haomeiwen.com/subject/swgldctx.html