Flutter TabBar 自定义点击事件

Posted 2021-09-05 安果移不动

class _BasePageState extends State<BasePage>
    with SingleTickerProviderStateMixin {
  var _tabList = ['甲方', '乙方', '预付', '后付', '筛选'];
  late TabController _tabController;

首先要使用 with SingleTickerProviderStateMixin

因为和这个tabcontroller的初始化有关系

  @override
  void initState() {
    _tabController = TabController(
      length: _tabList.length,
      vsync: this,
    );
    super.initState();

    _initData();
  }

使用也非常简单

// 新增过滤条件
  _buildFilter() {
    if (_adList.isEmpty) {
      return [];
    }
    return [
      TabBar(
        //是否可以滚动
        // isScrollable: true,
          unselectedLabelColor: Color(0xff666666),
          labelStyle: TextStyle(fontSize: 16.0),
          labelColor: widget.color,
          controller: _tabController,
          onTap: (index) {
            print(index);
          },
          tabs: _tabList.map((e) {
            return Tab(text: e);
          }).toList())
    ];
  }
}

平时可以和TabView一起使用。但是我们这里也可以使用onTap自定义点击事件