美文网首页
Flutter tabbar

Flutter tabbar

作者: 学学学q | 来源:发表于2019-11-26 11:16 被阅读0次
    使用StatefulWidget,以及如何使用bottomNavigationBar,如果想使用iOS风格的tabbar那么可以使用CupertinoTabBar
    class HomePageState extends StatefulWidget {
      @override
      _HomePage createState() => new _HomePage();
    
    }
    
    class _HomePage extends State<HomePageState> {
      int _pageIndex = 1;
    
      final List<Widget> _pages = [
        new Detail(),
        new News(),
        new DetailPage()
      ];
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('我的app'),
            centerTitle: true,
          ),
          body: _pages[_pageIndex],
          bottomNavigationBar: new BottomNavigationBar(
            onTap: changeIndex,
            currentIndex: _pageIndex,
            items:
              [
                new BottomNavigationBarItem(icon: new Icon(Icons.dashboard), title: new Text('我的')),
                new BottomNavigationBarItem(icon: new Icon(Icons.dehaze), title: new Text('弱智')),
                new BottomNavigationBarItem(icon: new Icon(Icons.video_library), title: new Text('video')),
              ],
          )
        );
      }
    
      void changeIndex(int index) {
        setState(() {
           _pageIndex = index;
        });
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter tabbar

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