SwiftUI菜单样式Picker标签文本不显示且无法修改问题

问题原因 #

使用.pickerStyle(.menu)时，Picker默认会用当前选中的选项文本替换标签内容。如果你的gender初始值没有匹配任何选项的tag（比如初始为0、nil，而选项tag是1和2），标签就会显示为空，导致预设的提示文本“Select a gender”无法展示。

解决方案 #

方案1：动态绑定标签文本

先给gender设置一个未匹配选项的初始值，再根据选中状态动态切换标签内容：

// 先定义gender的初始值（示例设为0，不匹配任何选项tag）
@State private var gender = 0

private var addGenderSection: some View {
    VStack(spacing: 20) {
        Spacer()
        
        Text("What's your gender?")
            .font(.largeTitle)
            .fontWeight(.semibold)
            .foregroundStyle(.white)
        
        Picker(selection: $gender) {
            Text("1").tag(1)
            Text("2").tag(2)
        } label: {
            // 根据gender值动态显示文本
            Text(gender == 0 ? "Select a gender" : "\(gender)")
                .font(.headline)
                .foregroundStyle(.purple)
                .frame(height: 55)
                .frame(maxWidth: .infinity)
                .background(Color.white)
        }
        .pickerStyle(.menu)

        Spacer()
        Spacer()
    }
    .padding(30)
}

方案2：用Menu组件手动实现（更灵活）

如果Picker的Menu样式限制过多，可以直接用Menu组件模拟Picker行为，完全控制标签和选项：

@State private var gender = 0

private var addGenderSection: some View {
    VStack(spacing: 20) {
        Spacer()
        
        Text("What's your gender?")
            .font(.largeTitle)
            .fontWeight(.semibold)
            .foregroundStyle(.white)
        
        Menu {
            Button(action: { gender = 1 }) {
                Text("1")
                // 显示选中标记
                if gender == 1 {
                    Image(systemName: "checkmark")
                }
            }
            Button(action: { gender = 2 }) {
                Text("2")
                if gender == 2 {
                    Image(systemName: "checkmark")
                }
            }
        } label: {
            Text(gender == 0 ? "Select a gender" : "\(gender)")
                .font(.headline)
                .foregroundStyle(.purple)
                .frame(height: 55)
                .frame(maxWidth: .infinity)
                .background(Color.white)
        }

        Spacer()
        Spacer()
    }
    .padding(30)
}

效果说明 #

两种方案都能实现：未选中时显示“Select a gender”，选中后自动切换为对应的选项文本，同时保留你设置的标签样式。

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