20Flutter通过TabController定义顶部tab切换，介绍生命周期函数

今天药忘吃喽~ 2023-08-17 15:59 114阅读 0赞

基本使用：

import 'package:flutter/material.dart';
    
    class TabBarControllerPage extends StatefulWidget {
      TabBarControllerPage({Key key}) : super(key: key);
    
      _TabBarControllerPageState createState() => _TabBarControllerPageState();
    }
    
    class _TabBarControllerPageState extends State<TabBarControllerPage> with SingleTickerProviderStateMixin{
      TabController _tabController;
      @override
      void dispose(){ //生命周期函数：
      super.dispose();
      _tabController.dispose();
      }
      @override
      void initState(){  //生命周期函数：
        super.initState();
        _tabController=new TabController(
          vsync: this,
          length: 2
        );
        _tabController.addListener((){
          print(_tabController.index);
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('TabBarControllerPage'),
            bottom: TabBar(
              controller:this._tabController,
              tabs: <Widget>[
                Tab(text: '热销'),
                Tab(text: '推荐')
              ],
            ),
          ),
          body: TabBarView(
            controller: this._tabController,
            children: <Widget>[
              Center(child: Text('热销')),
              Center(child: Text('推荐'))
            ],
          )
    
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11507951.html