iOS 16中SwiftUI Picker标签不显示问题及替代方案咨询

以下是几种无需在Picker上方额外添加文本的可行解决方案：

1. 将Picker放入Form或List容器中 #

在iOS 16里，Picker的label会在Form/List容器中自动作为列表项的左侧标签显示，这是系统默认的列表布局行为。修改后的代码示例：

@State private var selection = "1"

var body: some View {
    Form {
        Picker(
            selection: $selection,
            content: {
                Text("1").tag("1")
                Text("2").tag("2")
                Text("3").tag("3")
            },
            label: {
                Text("text")
            })
    }
}

2. 显式指定Picker样式 #

不同的Picker样式对label的渲染逻辑不同，按需选择即可：

使用Menu样式 #

此时label会作为触发菜单的按钮文本显示，点击后弹出选项列表：

@State private var selection = "1"

var body: some View {
    Picker(
        selection: $selection,
        content: {
            Text("1").tag("1")
            Text("2").tag("2")
            Text("3").tag("3")
        },
        label: {
            Text("text")
        })
    .pickerStyle(.menu)
}

使用Inline样式 #

label会和选择项同行展示，适合需要紧凑布局的场景：

@State private var selection = "1"

var body: some View {
    Picker(
        selection: $selection,
        content: {
            Text("1").tag("1")
            Text("2").tag("2")
            Text("3").tag("3")
        },
        label: {
            Text("text")
        })
    .pickerStyle(.inline)
}

3. 自定义布局容器 #

如果不想依赖系统容器或样式，可以用HStack/VStack手动控制label与Picker的位置，同时将Picker自身的label设为空避免重复：

@State private var selection = "1"

var body: some View {
    HStack(alignment: .center, spacing: 16) {
        Text("text")
        Picker(
            selection: $selection,
            content: {
                Text("1").tag("1")
                Text("2").tag("2")
                Text("3").tag("3")
            },
            label: { EmptyView() })
        .pickerStyle(.segmented)
    }
    .padding()
}

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