首先看你的代码，用的是TabBar作为底部导航，但Tab组件本身并没有直接的onTap或onPressed属性，不过我们可以通过以下几种方式实现需求：

方法一：用GestureDetector包裹每个Icon直接加点击事件 #

这种方式最直接，给每个Tab里的Icon套一层GestureDetector，就能单独给图标绑定点击函数了，代码修改如下：

bottomNavigationBar: Material(
  color: Colors.green,
  child: TabBar(
    controller: controller,
    tabs: <Widget>[
      Tab(
        icon: GestureDetector(
          onTap: () {
            // 这里写第一个图标点击后的逻辑
            print("聚焦图标被点击了");
            // 如果需要点击图标同时切换Tab，加上这句：controller.animateTo(0);
          },
          child: Icon(Icons.filter_center_focus),
        ),
      ),
      Tab(
        icon: GestureDetector(
          onTap: () {
            // 第二个图标点击逻辑
            print("搜索图标被点击了");
            // 需要切换Tab的话：controller.animateTo(1);
          },
          child: Icon(Icons.search),
        ),
      ),
    ],
  ),
),

注意：如果想让点击图标同时切换Tab，记得在onTap里加上controller.animateTo(对应索引)，不然只会执行你的自定义逻辑，不会切换页面。

方法二：监听TabController的索引变化 #

如果你希望**切换Tab的时候（不管是点击图标还是滑动页面）**都触发对应函数，可以给TabController添加监听，这样更贴合TabBar的原生切换逻辑：

首先在初始化controller的时候添加监听（比如在initState里）：

@override
void initState() {
  super.initState();
  controller.addListener(() {
    // 确保是用户主动切换，而不是动画过程中的中间状态
    if (!controller.indexIsChanging) {
      switch (controller.index) {
        case 0:
          // 第一个Tab激活时执行的函数
          _onFocusTabSelected();
          break;
        case 1:
          // 第二个Tab激活时执行的函数
          _onSearchTabSelected();
          break;
      }
    }
  });
}

// 自定义的函数
void _onFocusTabSelected() {
  print("聚焦Tab被选中");
}

void _onSearchTabSelected() {
  print("搜索Tab被选中");
}

这种方式的好处是不用修改TabBar的结构，只要监听控制器的变化就行，适合需要和Tab切换强绑定的场景。

方法三：换成BottomNavigationBar（更推荐的底部导航方案） #

其实Flutter官方更推荐用BottomNavigationBar来做底部导航，它本身就自带onTap回调，用法更简单，代码示例：

bottomNavigationBar: BottomNavigationBar(
  backgroundColor: Colors.green,
  currentIndex: controller.index,
  onTap: (int index) {
    // 切换Tab
    controller.animateTo(index);
    // 根据索引执行对应函数
    switch (index) {
      case 0:
        print("聚焦图标被点击");
        break;
      case 1:
        print("搜索图标被点击");
        break;
    }
  },
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.filter_center_focus),
      label: '', // 如果不需要文字可以留空
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: '',
    ),
  ],
),

这种方式代码更简洁，符合Flutter的设计规范，而且自带选中状态的样式控制，如果你没有特别的TabBar需求，建议用这个方案。

内容的提问来源于stack exchange，提问作者heyr