美文网首页
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