译自 www.hackingwithswift.com/books/ios-s…

更多内容，欢迎关注公众号「Swift花园」

喜欢文章？不如来个 🔺💛➕三连？关注专栏，关注我 🚀🚀🚀

创建上下文菜单

当用户点击按钮或者导航链接时，毫无疑问 SwiftUI 会触发那些视图的默认动作，但是假如用户长按某样东西并且保持呢？在老 iPhone 上，用户可以通过用力按压触发 3D Touch，这里的原理是一样的：用户想要正在交互的东西的更多选项。

SwiftUI 可以让我们附加上下文菜单到对象，以提供额外的功能，这个过程只需要用到 contextMenu() modifier。你可以传给这个 modifier 一组按钮选项，它们会按顺序显示。比如，我们可以像下面这样构建一个简单的上下文菜单，控制某个视图的背景颜色：

struct ContentView: View {
    @State private var backgroundColor = Color.red

    var body: some View {
        VStack {
            Text("Hello, World!")
                .padding()
                .background(backgroundColor)

            Text("Change Color")
                .padding()
                .contextMenu {
                    Button(action: {
                        self.backgroundColor = .red
                    }) {
                        Text("Red")
                    }

                    Button(action: {
                        self.backgroundColor = .green
                    }) {
                        Text("Green")
                    }

                    Button(action: {
                        self.backgroundColor = .blue
                    }) {
                        Text("Blue")
                    }
                }
        }
    }
}

就像 TabView 一样，上下文菜单里的每一项都可以有文字和图像，而且同样地，你传入图像和文字的先后顺序，或者传入多个图像，都不影响它的规则 —— 先显示一个图像，然后显示一个文本。

接下来有一个要点：为了让用户界面在应用间保持统一，iOS 会保留透明度，但以纯色渲染图像。这样就让很多图片失去作用：假如你有三种不同狗狗的图片，所有三种狗都会以纯色渲染，颜色都被移除。

因此，你应该尽量借助线条艺术图标，比如 Apple 的 SF Symbols，像这样：

Button(action: {
    self.backgroundColor = .red
}) {
    Text("Red")
    Image(systemName: "checkmark.circle.fill")
        .foregroundColor(.red)
}

处理上下文菜单，我有几条帮助你获得最佳用户体验的建议：

一旦你打算使用它们，在尽可能多的地方使用它们 —— 有的地方有，有的地方没有，可能会让用户沮丧。
让选项列表尽可能短 —— 控制在三个或者更少。
不用重复用户可以 UI 中别处看到的菜单。

记住，上下文菜单天然是隐藏的。因此，把重要动作隐藏到上下文菜单时请三思。

我的公众号这里有Swift及计算机编程的相关文章，以及优秀国外文章翻译，欢迎关注～

[SwiftUI 100 天] 创建上下文菜单

创建上下文菜单