Flutter中如何仿照现有底部导航实现同规格顶部NavigationBar？

实现核心思路 #

不需要新建独立的状态管理或交互流程，直接复用现有底部导航维护的getpageindex状态、onTabchangePage页面切换回调，仅将渲染逻辑挪至页面顶部位置，所有配置项与底部导航完全对齐即可。
需要严格对齐的匹配维度：

• 背景色统一 为Colors.black，和底部导航无色彩差异
• 色彩逻辑对齐 选中态图标颜色为Colors.green，未选中态图标颜色为Colors.white10
• 特殊尺寸保留 原配置里尺寸为40的中间相机图标，不做自动缩放
• 排布效果对齐 图标横向均匀分布，和原CupertinoTabBar的item排布逻辑完全一致

可直接落地的实现代码 #

将以下配置替换原Scaffold的appBar属性即可，无需改动底部导航的原有逻辑：

appBar: PreferredSize(
  // 高度适配原40尺寸的相机图标，避免图标被边缘裁切
  preferredSize: Size.fromHeight(56),
  child: Container(
    color: Colors.black,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround, // 模拟CupertinoTabBar的item均匀分布效果
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        IconButton(
          icon: Icon(
            Icons.home,
            color: getpageindex == 0 ? Colors.green : Colors.white10,
          ),
          onPressed: () => onTabchangePage(0),
        ),
        IconButton(
          icon: Icon(
            Icons.search,
            color: getpageindex == 1 ? Colors.green : Colors.white10,
          ),
          onPressed: () => onTabchangePage(1),
        ),
        IconButton(
          icon: Icon(
            Icons.photo_camera,
            size: 40, // 与原底部导航的图标尺寸完全一致
            color: getpageindex == 2 ? Colors.green : Colors.white10,
          ),
          onPressed: () => onTabchangePage(2),
        ),
        IconButton(
          icon: Icon(
            Icons.notifications,
            color: getpageindex == 3 ? Colors.green : Colors.white10,
          ),
          onPressed: () => onTabchangePage(3),
        ),
        IconButton(
          icon: Icon(
            Icons.person_add_alt_1_sharp,
            color: getpageindex == 4 ? Colors.green : Colors.white10,
          ),
          onPressed: () => onTabchangePage(4),
        ),
      ],
    ),
  ),
)

一致性保障要点 #

• 因为直接复用原有状态和回调，不管是点击顶部导航还是底部导航，选中索引变化、页面跳转的交互逻辑完全同步，不会出现两端状态不一致的问题
• 移除了默认AppBar自带的阴影、悬浮磨砂效果、返回按钮占位，保持和原底部导航一样的纯平黑色背景，没有多余装饰
• 所有图标尺寸、色彩取值和原配置逐项对齐，不存在视觉差异

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