macOS14下SwiftUI菜单栏子菜单选择异常问题求助

问题描述 #

在macOS 14中使用SwiftUI实现菜单栏子菜单时遇到两个问题：

• 使用Picker作为子菜单时，选择选项后onChange回调不会立即触发，需再次点击菜单栏才执行；
• 尝试在Picker中用Button实现可点击子菜单时，按钮点击完全无响应。

原代码如下：

import SwiftUI

@main
struct MenuAppApp: App 
{
    var body: some Scene 
    {
        WindowGroup 
        {
            ContentView()
        }
        .commands
        {
            MyMenu()
        }
    }
}

struct MyMenu: Commands
{
    let array = ["Submenu 1", "Submenu 2", "Submenu 3"]
    @State var selected = "Submenu 1"
    
    var body: some Commands
    {
        CommandMenu("My Menu")
        {
            Button("First Thing")
            {
                print ("First Thing")
            }
            
            Divider()
            Picker(selection: $selected, label: Text("Second Thing"))
            {
                ForEach (Array(array.enumerated()), id: \.element)
                { index, item in
                    Text(item).tag(item)
//                    Button(item)
//                    {
//                        print("Button \(item) selected")
//                    }
                }
            }
            .onChange(of: selected)
            {
                print ("OnChange \(selected)")
            }
            
        }
    }
}

struct ContentView: View 
{
    var body: some View 
    {
        VStack 
        {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

解决方案 #

核心问题分析 #

Picker组件在CommandMenu中的行为与普通View存在差异：其状态更新不会立即同步到回调，且内部不支持可交互的Button组件。更适配菜单栏场景的做法是使用Menu组件实现子菜单，贴合macOS原生交互逻辑。

修改后的完整代码 #

import SwiftUI

@main
struct MenuAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .commands {
            MyMenu()
        }
    }
}

struct MyMenu: Commands {
    let array = ["Submenu 1", "Submenu 2", "Submenu 3"]
    @State var selected = "Submenu 1"
    
    var body: some Commands {
        CommandMenu("My Menu") {
            Button("First Thing") {
                print("First Thing")
            }
            
            Divider()
            
            // 用Menu实现可交互子菜单
            Menu("Second Thing (\(selected))") {
                ForEach(array, id: \.self) { item in
                    Button(item) {
                        selected = item
                        print("Button \(item) selected")
                    }
                    // 为选中项添加勾选标记
                    .toggleStyle(.checkbox)
                    .toggle(isOn: Binding(
                        get: { selected == item },
                        set: { _ in }
                    ))
                }
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

关键改进点 #

• 用Menu替代Picker，直接在子菜单中放置Button，点击时立即执行动作并更新选中状态；
• 通过toggleStyle(.checkbox)实现选中项的视觉标记，清晰展示当前选择；
• 完全规避了Picker在菜单栏中的状态同步延迟问题，交互逻辑符合macOS原生体验。

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