//注意这里混入了 SingleTickerProviderStateMixin 类 class _DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin { ScrollController _scrollViewController; TabController _tabController; @override void initState() { super.initState(); _scrollViewController = ScrollController(); //length要和展示的tab数量一致 _tabController = TabController(vsync: this, length: 6); } @override void dispose() { _scrollViewController.dispose(); _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return SizedBox( child: Scaffold( appBar: AppBar( title: Text('选项卡'), leading: Icon(Icons.home), backgroundColor: Colors.green, bottom: TabBar( controller: _tabController, //是否滚动 isScrollable: true, tabs: [ Tab( text: 'Tab1', icon: Icon(Icons.ac_unit), ), Tab( text: 'Tab2', ), Tab( text: 'Tab3', ), Tab( text: 'Tab4', ), Tab( text: 'Tab5', ), Tab( text: 'Tab6', ), ], ), ), //tab内容,TabBarView通常和TabBar一起使用 body: TabBarView( controller: _tabController, children: [ Text('选项卡1'), Text('选项卡2'), Text('选项卡3'), Text('选项卡4'), Text('选项卡5'), Text('选项卡6'), ], ), ), ); } }
Flutter笔记57:TabBar选项卡组件
TabBar选项卡组件