tvOS SwiftUI Picker选中项不显示勾选标记问题求助

在tvOS应用开发中，使用SwiftUI构建Picker组件时，遇到选中项无法显示勾选标记的问题。已尝试调整强调色、检查ID匹配、改用List替代Form、UI调试器排查等方法，均未解决。确认tag与OptionType类型匹配，应用可识别选中项（选中已选行无响应），但选中项始终不显示勾选标记。

原复现代码：

import SwiftUI
import Combine

enum OptionType: String, CaseIterable, Identifiable {
    case option1 = "Option 1"
    case option2 = "Option 2"
    case option3 = "Option 3"
    case option4 = "Option 4"
    case option5 = "Option 5"

    var id: String { rawValue }
}

class MySettngs: ObservableObject {

    @Published var optionType: OptionType = .option1
}

struct ContentView: View {
    @ObservedObject var settings: MySettngs

    var body: some View {
        NavigationStack {
            Form {
                Section("Option") {
                    Picker("Option Type", selection: $settings.optionType) {
                        ForEach(OptionType.allCases) { option in
                            Text(option.rawValue)
                                .tag(option)
                        }
                    }
                }
            }
        }
    }
}

#Preview {
    ContentView(settings: MySettngs())
        .background(.red)
}

解决方案 #

tvOS上SwiftUI的Picker在Form中默认使用MenuPickerStyle，该样式不会在列表行显示勾选标记，而是通过弹出菜单选择。要实现选中项显示勾选标记，可通过以下两种方式解决：

方法1：手动添加勾选标记 #

在每个选项的视图中，根据选中状态手动添加勾选图标，确保视觉反馈：

struct ContentView: View {
    @ObservedObject var settings: MySettngs

    var body: some View {
        NavigationStack {
            Form {
                Section("Option") {
                    Picker("Option Type", selection: $settings.optionType) {
                        ForEach(OptionType.allCases) { option in
                            HStack {
                                Text(option.rawValue)
                                Spacer()
                                // 手动添加勾选标记
                                if option == settings.optionType {
                                    Image(systemName: "checkmark")
                                        .foregroundColor(.accentColor)
                                }
                            }
                            .tag(option)
                        }
                    }
                }
            }
        }
    }
}

方法2：切换Picker样式并使用List #

将Form替换为List，并设置Picker为.inline样式，该样式会自动显示选中项的勾选标记：

struct ContentView: View {
    @ObservedObject var settings: MySettngs

    var body: some View {
        NavigationStack {
            List {
                Section("Option") {
                    Picker("Option Type", selection: $settings.optionType) {
                        ForEach(OptionType.allCases) { option in
                            Text(option.rawValue)
                                .tag(option)
                        }
                    }
                    .pickerStyle(.inline) // 启用inline样式
                }
            }
        }
    }
}

说明 #

• 方法1兼容性更强，可自定义勾选标记的样式和位置；
• 方法2利用系统原生样式，更符合tvOS设计规范，无需手动维护选中状态的UI。

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