Flutter 通过TabController 定义TabBar

Flutter 基础 专栏收录该内容
73 篇文章 4 订阅

语法使用

  1. 页面必须继承StatefulWidget
  2. 页面必须实现SingleTickerProviderStateMixin
  3. 页面初始化时,实例化TabController
  4. 在TabBar组件中指定controller为我们实例化的TabController
  5. 在TabBarView组件中指定controller为我们实例化的TabController

 

主要是监听TabBar与TabBarView的交互。比如,我们可以在tab切换时加载不同数据;可以自定义切换动画等。

参数详解

属性说明
animation官方:一个动画,其值表示TabBar所选选项卡指示器的当前位置以及TabBar 和TabBarView的scrollOffsets
index当前tab索引,//跳转后执行
indexIsChanging动画是时为true
lengthtab总数
offset动画的值和索引之间的差异。偏移量必须在-1.0和1.0之间
previousIndex前tab索引,跳转后执行

方法详解 

方法名称说明
animateTo从当前tab跳到目标tab并执行动画
dispose销毁
addListener添加监听
noSuchMethod当访问不存在的属性或方法时调用(不知道是什么鬼)
notifyListeners调用所有监听器
removeListener清除监听器

代码示例

1、页面必须继承StatefulWidget

class TabControllerPage extends StatefulWidget {
  @override
  _TabControllerPageState createState() => _TabControllerPageState();
}

2、页面必须实现SingleTickerProviderStateMixin

class _TabControllerPageState extends State<TabControllerPage> with SingleTickerProviderStateMixin{

3、页面初始化时实例化TabController,并指定tab长度

TabController _tabController;

  @override
  void initState() {
    print('初始化 数据...');
    _tabController = new TabController(
      vsync: this,//固定写法
      length: 9   //指定tab长度
    );
    super.initState();
  }

4、在TabBar组件中指定controller为我们实例化的TabController

bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: <Widget>[
              Tab(text: '推荐',),
                Tab(text: '丽人',),
                Tab(text: '旅行',),
                Tab(text: '电影',),
                Tab(text: '结婚',),
                Tab(text: '购物',),
                Tab(text: '教培',),
                Tab(text: '家装',),
                Tab(text: '亲子',),
            ],
          ),

5、在TabBarView组件中指定controller为我们实例化的TabController

body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            // Your code
            ),
          ],
        )

在这里简单的介绍一下TabController监听事件,打印当前索引和前索引。

//添加监听
    _tabController.addListener((){
      var index = _tabController.index;
      var previousIndex = _tabController.previousIndex;
      print("index: $index");
      print('previousIndex: $previousIndex');
    });

 

 效果图

 完整代码

查看完整代码

  • 6
    点赞
  • 3
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

马志武

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值