shadcn_ui-menubar

用途

ShadMenubar 是 Shadcn UI 提供的菜单栏组件，用于构建桌面风格的常驻顶部菜单，例如 File、Edit、View 等典型菜单结构。适用于在界面顶部添加持续可见的菜单栏。

主要能力

• 顶层菜单项：ShadMenubar 由多个 ShadMenubarItem 组成，每个 ShadMenubarItem 通过 child 提供标签（如 File、Edit、View），通过 items 提供该菜单下的条目列表。
• 菜单条目：使用 ShadContextMenuItem 表示具体条目；ShadContextMenuItem.inset 可创建带内缩效果的条目。
• 分隔线：可使用 ShadSeparator.horizontal，或使用 Divider(height: 8)。文档建议封装一个可复用分隔线，例如 ShadSeparator.horizontal(margin: const EdgeInsets.symmetric(vertical: 4), color: theme.colorScheme.muted)。
• 子菜单：通过嵌套 ShadContextMenuItem 并为其设置 items 可实现子菜单；父项通常设置 trailing: Icon(LucideIcons.chevronRight) 作为展开指示。
• 禁用条目：将 enabled 设为 false 可禁用某个菜单项。

使用方式

以 ShadMenubar 为根，items 传入多个 ShadMenubarItem。每个 ShadMenubarItem 的 items 数组中放入 ShadContextMenuItem，可混入 divider、禁用项以及带 items 的子菜单项。示例结构如下：

ShadMenubar(
  items: [
    ShadMenubarItem(
      items: [
        const ShadContextMenuItem(child: Text('New Tab')),
        const ShadContextMenuItem(child: Text('New Window')),
        const ShadContextMenuItem(
          enabled: false,
          child: Text('New Incognito Window'),
        ),
        divider,
        const ShadContextMenuItem(
          trailing: Icon(LucideIcons.chevronRight),
          items: [
            ShadContextMenuItem(child: Text('Email Link')),
            ShadContextMenuItem(child: Text('Messages')),
          ],
          child: Text('Share'),
        ),
        divider,
        const ShadContextMenuItem(child: Text('Print...')),
      ],
      child: const Text('File'),
    ),
    ShadMenubarItem(
      items: [
        const ShadContextMenuItem(child: Text('Undo')),
        const ShadContextMenuItem(child: Text('Redo')),
        divider,
        ShadContextMenuItem(
          trailing: const Icon(LucideIcons.chevronRight),
          items: [
            const ShadContextMenuItem(child: Text('Find...')),
            const ShadContextMenuItem(child: Text('Find Next')),
          ],
          child: const Text('Find'),
        ),
        divider,
        const ShadContextMenuItem(child: Text('Cut')),
        const ShadContextMenuItem(child: Text('Copy')),
        const ShadContextMenuItem(child: Text('Paste')),
      ],
      child: const Text('Edit'),
    ),
    ShadMenubarItem(
      items: [
        const ShadContextMenuItem.inset(child: Text('Reload')),
        const ShadContextMenuItem.inset(child: Text('Toggle Full Screen')),
      ],
      child: const Text('View'),
    ),
  ],
)

分隔线可这样创建：ShadSeparator.horizontal(margin: const EdgeInsets.symmetric(vertical: 4), color: theme.colorScheme.muted)。

适用场景

需要在应用中添加常驻顶部菜单栏（如 File、Edit、View 等）的界面场景；需要嵌套子菜单、分隔线、禁用项或内缩菜单项的桌面式菜单交互。

限制

暂未提供关于平台、依赖版本、收费或价格的明确信息。