阅读 269

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

译自 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)
}
复制代码

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

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

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


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

Swift花园微信公众号