驼峰Geek

当开发一个 Mac App 的时候，菜单栏是必不可少的部分，以 Safari 为例，可以看出有很多使用的功能都会放到菜单部分。

这篇文章会介绍如何用 SwiftUI 创建菜单。

新建项目

用 Xcode 新建一个 Mac ，如下图所示

新建完项目之后，运行程序可以看到一些默认的菜单，如下图所示：

定义新菜单

打开 menuDemoApp.swift 文件，修改代码如下

import SwiftUI

@main
struct menuDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        // 这里是新增的代码
        .commands {
            CommandMenu("新菜单"){
                Button("子菜单 1"){
                    print("点击 子菜单 1")
                }
            }
        }
    }
}

再加一个子菜单，代码如下：

        // 这里是新增的代码
        .commands {
            CommandMenu("新菜单"){
                Button("子菜单 1"){
                    print("点击 子菜单 1")
                }
                Button("子菜单 2"){
                    print("点击 子菜单 2")
                }
            }
        }

给菜单加快捷键

加快捷键，使用 .keyboardShortcut("i"), 代码如下：

 .commands {
            CommandMenu("新菜单"){
                Button("子菜单 1"){
                    print("点击 子菜单 1")
                }
                .keyboardShortcut("i")
                Button("子菜单 2"){
                    print("点击 子菜单 2")
                }
                .keyboardShortcut("u")
            }
        }

菜单复用

如果有多个窗口，那么就需要菜单复用了，这时候可以定义一个 struct，完整代码如下：

import SwiftUI

@main
struct menuDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        // 这里是新增的代码
        .commands {
            MyCommandMenu()
        }
    }
}

struct MyCommandMenu: Commands {
    var body: some Commands {
        CommandMenu("新菜单"){
            Button("子菜单 1"){
                print("点击 子菜单 1")
            }
            .keyboardShortcut("i")
            Button("子菜单 2"){
                print("点击 子菜单 2")
            }
            .keyboardShortcut("u")
        }
    }
}

增加设置菜单

一般程序都会有 设置 菜单，目前我们的程序还没有

如何添加呢？
很简单，在D2cSimApp 的WindowGroup 同级加下面代码

    Settings {
           SettingHome() // 这里自定义视图
        }

再次运行可以看到有了设置。

现有菜单的新增和替换

        // 在设置之前新增一个检查更新的按钮
		CommandGroup(before: .appSettings) {
                Button("Check for updates"){
                    
                }
            }
        // 替换关于按钮
            CommandGroup(replacing: .appInfo) {
                Button("Hello , World"){
                    
                }
            }

可以通过类似的方式，去替换一些其他菜单项。