Flutter笔记57：TabBar选项卡组件

TabBar选项卡组件

//注意这里混入了 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'),
          ],
        ),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！