Flutter TabBar 与 TabBarView 使用

class _GroupInfoState extends BaseState<GroupInfoNeWPage>
    with SingleTickerProviderStateMixin{
    TabController tabController;
      @override
  void initState() {
    super.initState();
    // 添加监听器
    tabController = TabController(vsync: this, length: titleTabs.length)
      ..addListener(() {
          switch (tabController.index) {
            case 0:
                  print("坚果");
                  break;
                case 1:
                  print("前端")
                  break;
           
          }
      });
  }
    //增加controller
    title: TabBar(
        controller: tabController,
    )
    child: TabBarView(
        controller: tabController,
    )
}

存在的问题

解决 Flutter TabController 执行两次的问题

另一个demo

class MyButtonWidget extends State<Mypage2>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    tabController = new TabController(vsync: this, length: 2);
    tabController.addListener(() {
      print(tabController.index);
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: TabBar( 
                 controller: tabController,
                 tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")],),),
        body: TabBarView(
          controller: tabController,
          children: <Widget>[]),
      ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    tabController.dispose();
  }
}

必要的操作

1、有状态组件多继承 SingleTickerProviderStateMixin
2、在initData中 初始化TabController传入两个参数，固定写法
3、TabBar 和 TabBarView 都需要配置上 controller。
4、initData() 为组件初始化函数 dispose (处置) () 为组件销毁函数