升级iOS15与Xcode13后SwiftUI Picker自定义标签不渲染问题

问题根因 #

iOS 15对SwiftUI Picker的默认渲染逻辑做了调整：未嵌套在Form/List容器内的Picker，系统默认样式会忽略自定义label参数，仅渲染选择项部分，所以出现iOS 14正常、iOS 15及以上版本自定义标签不展示的兼容问题。

修复方案 #

仅需要给Picker显式指定.menu样式即可，该样式兼容iOS 14及以上版本，可保证多系统版本行为一致，修改后的代码如下：

@State var selectedNumber: Int = 0

var body: some View {
    Picker(selection: $selectedNumber, label: customLabel) {
        ForEach(0..<10) {
            Text("\($0)")
        }
    }
    // 新增这行修饰符即可
    .pickerStyle(.menu)
}

var customLabel: some View {
    HStack {
        Image(systemName: "paperplane")
        Text(String(selectedNumber))
        Spacer()
        Text("⌵")
            .offset(y: -4)
    }
    .foregroundColor(.white)
    .font(.title)
    .padding()
    .frame(height: 32)
    .background(Color.blue)
    .cornerRadius(16)
}

你之前在iOS 15模拟器上的异常显示效果如下：

添加修饰符后，自定义标签会作为菜单的触发按钮，点击即可弹出选择项，和iOS14上的原有表现一致。

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