如何实现TabBar切换Tab时PopupMenuItem同步更新 类似WhatsApp效果

整体实现逻辑清晰：监听TabBar的选中下标变化，根据当前下标匹配对应菜单项列表，刷新AppBar的actions区域即可，以下是可直接复用的实现步骤：

• 第一步：定义不同Tab对应的菜单项配置
  提前整理每个Tab需要展示的菜单项，统一维护在列表中，后续修改也更方便：

// 下标和Tab顺序一一对应，示例为3个Tab：聊天、状态、通话
List<List<PopupMenuEntry>> tabMenuItems = [
  // 聊天Tab菜单
  [
    const PopupMenuItem(value: 'new_group', child: Text('新建群组')),
    const PopupMenuItem(value: 'new_broadcast', child: Text('新建广播')),
    const PopupMenuItem(value: 'linked_devices', child: Text('关联设备')),
    const PopupMenuItem(value: 'starred_messages', child: Text('星标消息')),
    const PopupMenuItem(value: 'settings', child: Text('设置')),
  ],
  // 状态Tab菜单
  [
    const PopupMenuItem(value: 'status_privacy', child: Text('状态隐私')),
    const PopupMenuItem(value: 'settings', child: Text('设置')),
  ],
  // 通话Tab菜单
  [
    const PopupMenuItem(value: 'clear_call_log', child: Text('清空通话记录')),
    const PopupMenuItem(value: 'settings', child: Text('设置')),
  ]
];

• 第二步：绑定Tab切换监听
  使用TabController控制Tab切换，添加监听实时同步当前选中下标：

late TabController _tabController;
int _currentTabIndex = 0;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
  // 监听Tab切换事件，刷新当前下标
  _tabController.addListener(() {
    setState(() {
      _currentTabIndex = _tabController.index;
    });
  });
}

@override
void dispose() {
  _tabController.dispose();
  super.dispose();
}

• 第三步：动态渲染Popup菜单
  在AppBar的actions区域，根据当前选中下标匹配对应的菜单项列表即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('WhatsApp Demo'),
      bottom: TabBar(
        controller: _tabController,
        tabs: const [
          Tab(text: '聊天'),
          Tab(text: '状态'),
          Tab(text: '通话'),
        ],
      ),
      actions: [
        IconButton(onPressed: (){}, icon: const Icon(Icons.search)),
        // 动态加载当前Tab的菜单
        PopupMenuButton(
          itemBuilder: (context) => tabMenuItems[_currentTabIndex],
          onSelected: (value) {
            // 处理菜单项点击逻辑
            switch(value) {
              case 'settings':
                // 跳转到设置页逻辑
                break;
              // 其余选项逻辑自行补充
            }
          },
        )
      ],
    ),
    body: TabBarView(
      controller: _tabController,
      children: const [
        ChatPage(),
        StatusPage(),
        CallPage(),
      ],
    ),
  );
}

如果你使用的是DefaultTabController而不是自定义TabController，可以不用手动维护监听，直接在itemBuilder中通过DefaultTabController.of(context).index获取当前选中下标即可，代码更简洁。

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