Tabbar
Tabbar通常创建为AppBar的AppBar.bottom部分,使用方式如下:
TabController _controller; int _selectedIndex = 0; final List<Widget> _tabViews = [ Container( child: Text('This is hot page'), ), Container( child: Text('This is tech page'), ), Container( child: Text('This is financial page'), ), ]; final List<Tab> _tabs = [ Tab( text: '热门', //标题,和child不能同时存在,只能设置一个 // child: Text('热门'), //标题,和text不能同时存在 icon: Icon(Icons.home), //标题对应的图标 ), Tab( text: '科技', // child: Text('科技'), icon: Icon(Icons.list), ), Tab( text: '金融', // child: Text('金融'), icon: Icon(Icons.more), ), ]; @override void initState() { super.initState(); _controller = TabController(vsync: this, length: _tabs.length); _controller.addListener(_handleTabSelection); } @override void dispose() { // TODO: implement dispose super.dispose(); _controller.dispose(); } void _handleTabSelection() { setState(() { _selectedIndex = _controller.index; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( //应用栏 title: Text(widget.title), bottom: TabBar( controller: _controller, //TabBar控制器,通过给controller对象添加addListener方法来监听切换动作 tabs: _tabs, //标签栏显示项集合 ), ), body: _tabViews[_selectedIndex], //页面显示的内容 ); }