Xcode13 Beta5+iOS15下SwiftUI如何实现点击文字唤起Picker

需求说明 #

• 在Picker选中选项旁显示自定义文字
• 用户点击自定义文字也能打开Picker选择面板

开发环境为Xcode 13 Beta 5，适配系统为iOS15。

初始问题 #

最初直接把提示文字放在Picker的内容区域，无法正确展示；后续将文字放在Picker外部，文字展示正常，但点击文字无法响应，不能唤起Picker。

初始实现代码如下：

struct ContentView: View {
    @State var fruit = "Apple"
    let fruits = ["Apple","Orange","Pear","Grape"]
    
    var body: some View {
        HStack {
            Picker(selection: $fruit) {
                Text("Picked:")
                ForEach(fruits, id: \.self){ fruit in
                    Text(fruit)
                }
            } label: {
                Text("")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

解决方案 #

将Picker嵌套在Menu组件中即可解决该问题，所有放在Menu的label参数内的内容，都可以响应点击唤起Picker选择面板，同时支持自定义显示图标、文字等内容，完全满足需求。

调整后实现代码如下：

Menu {
    Picker(selection: $fruit, label: EmptyView()) {
        ForEach(fruits, id: \.self) { fruit in
            Text(fruit)
        }
    }
} label: {
      HStack {
          Image(systemName: "hand.thumbsup.fill")
          Text("Picked: \(fruit)")
      }
}

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