Flutter 学习：TabBar 配置TabControlle

一.复习上一节

1. 标题左侧右侧添加按钮

AppBar(title: Text("标题${currentIndex}"),
              centerTitle: true,
              leading: 
              actions: <Widget>[])

2.去除debug图标

MaterialApp(debugShowCheckedModeBanner: false,)

3.TabBar 实现顶部切换

class MyButtonWidget extends State<Mypage2> {
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar( title: TabBar(tabs: <Widget>[ ]),),
        body: TabBarView( children: <Widget>[],
        ),
      ),
    );
  }
}

二.TabController 实现顶部tab切换

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,
            indicatorColor: Colors.red,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.white,
            tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")],
          ),
        ),
        body: TabBarView(
          controller: tabController,
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("tab1==1"),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("tab2==1"),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

 @override
  void dispose() {  //生命周期函数
    // TODO: implement dispose
    super.dispose();
    tabController.dispose();
  }

}

• 注意

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

三.总结

• TabBar 添加 controller 获取滑动监听

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();
  }
}