iOS中SwiftUI Picker使用.menu样式时Label失效的解决方法

在iOS15和iOS16版本中，SwiftUI的Picker组件会忽略传入的Label视图，例如你提供的示例代码里，"Select your gender"文本不会正常显示。以下是几种可行的解决方式：

方法1：将Picker放入Form/List容器 #

当Picker处于Form或List环境中时，.automatic样式会自动适配为带Label的列表行样式，Label会正常显示：

Form {
    Picker(selection: $gender,
           label: Text("Select your gender"),
           content: {
        Text(Gender.male.rawValue).tag(Gender.male)
        Text(Gender.female.rawValue).tag(Gender.female)
        Text(Gender.nobinary.rawValue).tag(Gender.nobinary)
    })
    .font(.largeTitle)
    .accentColor(.white)
}

方法2：手动组合Label与Picker #

如果不需要使用Form/List，可以用HStack手动将Label和Picker组合，同时给Picker指定.menu样式，并传入空视图作为Label避免冗余：

HStack {
    Text("Select your gender")
        .font(.largeTitle)
        .foregroundColor(.white)
    Spacer()
    Picker(selection: $gender,
           label: EmptyView(),
           content: {
        Text(Gender.male.rawValue).tag(Gender.male)
        Text(Gender.female.rawValue).tag(Gender.female)
        Text(Gender.nobinary.rawValue).tag(Gender.nobinary)
    })
    .pickerStyle(.menu)
    .font(.largeTitle)
    .accentColor(.white)
}

方法3：使用LabeledContent（iOS15+） #

LabeledContent是iOS15新增的组件，专门用于构建"标签+内容"的布局，完美适配这种场景：

LabeledContent("Select your gender") {
    Picker(selection: $gender, label: EmptyView()) {
        Text(Gender.male.rawValue).tag(Gender.male)
        Text(Gender.female.rawValue).tag(Gender.female)
        Text(Gender.nobinary.rawValue).tag(Gender.nobinary)
    }
    .pickerStyle(.menu)
    .font(.largeTitle)
    .accentColor(.white)
}
.font(.largeTitle)

原因说明 #

iOS15和iOS16中，Picker的.automatic样式会根据所在容器环境自动切换表现：在Form/List中显示为带Label的列表行，在普通容器中则仅显示选中值的按钮，此时传入的Label会被忽略。根据布局需求选择上述方法即可解决问题。

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