SwiftUI可操作选项视图Menu

Menu 是 SwiftUI 中用于提供一组可操作选项的视图，它类似于 iOS 上的上下文菜单。通过点击或触摸触发，用户可以选择一个或多个操作项。

基本语法

Menu("Title") {
    Button("Option 1", action: {
        // Action for Option 1
    })
    Button("Option 2", action: {
        // Action for Option 2
    })
}

“Title”：菜单按钮的标题。也可以替换为 Label 或包含 systemImage 图标的视图。

Button 子视图：每个 Button 代表一个菜单选项，点击时执行对应的 action。

系统图标和 Label

通过 Label 添加图标和文字。

Menu {
    Button("Option 1", action: {})
    Button("Option 2", action: {})
} label: {
    Label("Actions", systemImage: "ellipsis.circle")
}

Label：支持文字与系统图标的组合。

systemImage：引用 SF Symbols 提供的标准图标。

Menu("Sort", systemImage: "arrow.up.arrow.down") {
    Picker("Sort", selection: $sortOrder) {
        Text("Sort by Name")
            .tag([
                SortDescriptor(\User.name),
                SortDescriptor(\User.joinDate),
            ])
        
        Text("Sort by Join Date")
            .tag([
                SortDescriptor(\User.joinDate),
                SortDescriptor(\User.name)
            ])
    }
}

使用Menu视图前后的Picker选择器：

嵌套菜单

支持在 Menu 中添加子菜单。

Menu("Sort", systemImage: "arrow.up.arrow.down") {
    Menu("More Options") {
            Button("Sub Action 1", action: {})
            Button("Sub Action 2", action: {})
        }       
    }
}

动态内容

可以在 Menu 中动态生成选项列表，例如基于数组生成菜单项：

let actions = ["Edit", "Share", "Delete"]

Menu("Actions") {
    ForEach(actions, id: \.self) { action in
        Button(action) {
            print("\(action) selected")
        }
    }
}

注意事项

1、Menu 的位置：Menu 的外观由系统决定，无法自定义菜单弹出的方向或外观。

2、平台支持：

iOS 14+

macOS 11+

3、无边框按钮：可以通过 Menu 替代普通按钮，在更现代的设计中提供统一交互体验。

效果预览

基本功能：Menu 提供了一种优雅的方式来展示多个选项。

动态生成：适合从数据中生成选项。

嵌套和图标：提供丰富的交互体验。

通过 Menu，可以在 SwiftUI 中轻松实现上下文操作菜单或工具选择器，提升用户体验的交互感。