Swift上下文菜单contextMenu

在 SwiftUI 中，contextMenu 是用于为视图添加上下文菜单（右键或长按菜单）的修饰符。当用户长按或在支持鼠标操作的平台上右键点击视图时，会弹出一个包含一组操作选项的菜单。

基本用法

使用 contextMenu 修饰符，可以为视图附加一个上下文菜单：

struct ContentView: View {
    var body: some View {
        Text("长按我显示菜单")
            .padding()
            .contextMenu {
                Button(action: {
                    print("选项 1 被点击")
                }) {
                    Label("选项 1", systemImage: "star")
                }
                
                Button(action: {
                    print("选项 2 被点击")
                }) {
                    Label("选项 2", systemImage: "heart")
                }
            }
    }
}

代码解析

1、contextMenu

添加上下文菜单修饰符。

2、Button

每个菜单项是一个按钮，包含具体的动作。

3、Label

定义菜单项的文字和图标。

上下文菜单的动态内容

可以根据条件动态生成菜单内容：

struct ContentView: View {
    @State private var isFavorite = false

    var body: some View {
        Text("长按我显示菜单")
            .padding()
            .contextMenu {
                Button(action: {
                    isFavorite.toggle()
                }) {
                    Label(isFavorite ? "取消收藏" : "收藏", systemImage: isFavorite ? "star.fill" : "star")
                }
            }
    }
}

动态内容的实现：

使用状态变量 isFavorite 动态更新菜单选项。

上下文菜单的复杂内容

上下文菜单不仅限于简单的按钮，还可以包含更复杂的视图，比如分组或自定义布局。

struct ContentView: View {
    var body: some View {
        Image(systemName: "photo")
            .resizable()
            .frame(width: 100, height: 100)
            .contextMenu {
                Button(action: {
                    print("分享图片")
                }) {
                    Label("分享", systemImage: "square.and.arrow.up")
                }

                Button(action: {
                    print("删除图片")
                }) {
                    Label("删除", systemImage: "trash")
                        .foregroundColor(.red) // 自定义颜色
                }
                
                Divider() // 分割线

                Text("版本: 1.0") // 显示附加信息
            }
    }
}

自定义菜单样式

在 contextMenu 中无法直接更改菜单的背景色或字体样式，因为它是系统提供的样式，目的是保持一致性。如果需要完全自定义的菜单体验，可以通过实现自定义的弹出菜单代替 contextMenu。

使用场景

文件管理：如删除、重命名、分享文件。

图片操作：如下载、分享、编辑图片。

应用内快捷操作：快速访问特定功能。

支持的平台

contextMenu 可在以下平台上使用：

iOS：通过长按触发。

macOS：通过右键点击触发。

iPadOS：支持鼠标操作，也可以通过长按触发。