Flutter中能否在TabBar内嵌入DropdownList实现下拉选择后再切换页面？

问题根因 #

默认TabBar会监听所有子标签的点击事件，你点击DropdownButton时，点击事件会同时触发TabBar的默认切换逻辑，因此会出现下拉选项还未展开，TabBarView就提前切换的问题。

可行实现方案 #

方案1：拦截点击事件，阻止事件冒泡到TabBar #

给DropdownButton外层套GestureDetector，消费点击事件避免向上传递给TabBar，选中选项后手动控制TabBarView切换即可，代码示例如下：

// 首先需要在State中混入SingleTickerProviderStateMixin，定义TabController
late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 你需要的页面总数, vsync: this);
}

// TabBar的tabs配置如下
tabs: [
  const Tab(text: 'Home'),
  const Tab(text: 'About us'),
  GestureDetector(
    // 吸收所有点击事件
    behavior: HitTestBehavior.opaque,
    // 空实现消费点击，不向上传递给TabBar
    onTap: () {},
    child: DropdownButton(
      value: selectedValue,
      items: menuItems,
      onChanged: (String? value) {
        if (value != null) {
          // 选择完成后手动切换到对应页面
          // _tabController.animateTo(对应页面的下标);
          print(value);
        }
      },
    ),
  ),
]

方案2：自定义TabBar点击逻辑，禁用对应下标默认切换 #

直接在TabBar的onTap回调中拦截Dropdown所在标签的点击事件，只允许其他标签正常切换，代码示例如下：

TabBar(
  controller: _tabController,
  // 全手动控制切换逻辑
  onTap: (index) {
    // 假设Dropdown所在标签下标为2，根据实际情况修改
    if (index == 2) return;
    _tabController.animateTo(index);
  },
  tabs: [
    const Tab(text: 'Home'),
    const Tab(text: 'About us'),
    DropdownButton(
      value: selectedValue,
      items: menuItems,
      onChanged: (String? value) {
        if (value != null) {
          // 根据选中值切换到对应页面
          // _tabController.animateTo(对应页面下标);
          print(value);
        }
      },
    ),
  ],
)

替代方案 #

如果觉得上述实现逻辑复杂，可以将Dropdown组件从TabBar中移出，放到AppBar的actions区域、或TabBar上方/下方的独立区域，避免和TabBar的点击逻辑冲突，交互逻辑也更符合用户常规使用习惯。

内容的提问来源于stack exchange，提问作者Rodrigo Sander Bustillos Varga