Flutter：如何在CupertinoTabScaffold底部栏添加自定义按钮并实现弹窗？

要实现这个需求，核心是利用CupertinoTabBar的自定义item能力，配合onTap回调控制点击行为，同时用CupertinoTabController管理页面切换状态，具体步骤如下：

1. 自定义底部标签栏的中间按钮 #

CupertinoTabBar的items参数支持传入自定义的CupertinoTabBarItem，你可以把中间位置的item换成样式特殊的自定义按钮（比如圆形突出按钮），完全嵌入底部栏内。

2. 通过onTap区分跳转与弹窗逻辑 #

给CupertinoTabBar设置onTap回调，在回调里判断点击的标签索引：

• 对于需要跳转页面的标签，调用CupertinoTabController的index属性切换页面；
• 对于需要弹窗的标签或自定义按钮，直接触发弹窗组件（比如showCupertinoDialog、showCupertinoModalPopup），不修改控制器的选中索引，避免底部栏选中状态异常。

完整代码示例 #

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: MyTabPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyTabPage extends StatefulWidget {
  const MyTabPage({super.key});

  @override
  State<MyTabPage> createState() => _MyTabPageState();
}

class _MyTabPageState extends State<MyTabPage> {
  final _tabController = CupertinoTabController();

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

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      controller: _tabController,
      tabBar: CupertinoTabBar(
        items: const [
          CupertinoTabBarItem(
            icon: Icon(CupertinoIcons.home),
            label: '首页',
          ),
          CupertinoTabBarItem(
            icon: Icon(CupertinoIcons.bell),
            label: '通知',
          ),
          // 中间自定义按钮
          CupertinoTabBarItem(
            icon: CircleAvatar(
              backgroundColor: CupertinoColors.activeBlue,
              child: Icon(CupertinoIcons.add, color: CupertinoColors.white),
            ),
          ),
          CupertinoTabBarItem(
            icon: Icon(CupertinoIcons.search),
            label: '搜索',
          ),
          CupertinoTabBarItem(
            icon: Icon(CupertinoIcons.profile_circled),
            label: '我的',
          ),
        ],
        onTap: (index) {
          // 判断点击的索引，处理不同逻辑
          switch (index) {
            case 1: // 通知标签，触发弹窗
              showCupertinoDialog(
                context: context,
                builder: (context) => CupertinoAlertDialog(
                  title: const Text('通知中心'),
                  content: const Text('暂无新通知'),
                  actions: [
                    CupertinoDialogAction(
                      child: const Text('确定'),
                      onPressed: () => Navigator.pop(context),
                    ),
                  ],
                ),
              );
              break;
            case 2: // 中间自定义按钮，触发弹窗
              showCupertinoModalPopup(
                context: context,
                builder: (context) => CupertinoActionSheet(
                  title: const Text('创建内容'),
                  actions: [
                    CupertinoActionSheetAction(
                      onPressed: () {
                        Navigator.pop(context);
                        // 执行创建操作
                      },
                      child: const Text('发布动态'),
                    ),
                    CupertinoActionSheetAction(
                      onPressed: () {
                        Navigator.pop(context);
                        // 执行创建操作
                      },
                      child: const Text('上传图片'),
                    ),
                  ],
                  cancelButton: CupertinoActionSheetAction(
                    onPressed: () => Navigator.pop(context),
                    isDefaultAction: true,
                    child: const Text('取消'),
                  ),
                ),
              );
              break;
            default: // 其他标签，正常切换页面
              _tabController.index = index;
              break;
          }
        },
      ),
      tabBuilder: (context, index) {
        // 返回对应索引的页面
        switch (index) {
          case 0:
            return const CupertinoTabView(builder: (context) => HomePage());
          case 3:
            return const CupertinoTabView(builder: (context) => SearchPage());
          case 4:
            return const CupertinoTabView(builder: (context) => ProfilePage());
          default:
            // 对于不需要跳转的标签，返回一个空页面或者保持当前页面
            // 这里因为点击时不会切换到该索引，所以实际不会显示
            return const CupertinoTabView(builder: (context) => SizedBox());
        }
      },
    );
  }
}

// 示例页面
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('首页')),
      child: const Center(child: Text('首页内容')),
    );
  }
}

class SearchPage extends StatelessWidget {
  const SearchPage({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('搜索')),
      child: const Center(child: Text('搜索页面')),
    );
  }
}

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('我的')),
      child: const Center(child: Text('个人中心')),
    );
  }
}

关键说明 #

• 中间按钮通过CircleAvatar实现突出样式，完全嵌入CupertinoTabBarItem中，和其他标签保持一致的布局；
• onTap回调里通过索引判断逻辑，弹窗操作不修改_tabController.index，避免底部栏选中状态错误切换；
• tabBuilder中只处理需要跳转的页面索引，其他索引返回空页面即可，因为点击时不会切换到这些索引。

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