SwiftUI中如何自定义List内Picker选中项的勾选图标

SwiftUI的默认Inline Picker没有直接提供修改选中勾选图标的API，我们可以通过自定义Picker的选项视图来实现需求，具体做法如下：

核心思路 #

将Picker内部的默认文本选项替换为自定义视图，通过判断当前选项是否为选中状态，来显示自定义图标（而非系统默认的标记）。

修改后的完整代码 #

struct ContentView: View {
    var flavors = ["orange", "strawberry", "lemon"]
    @State private var selected: String = "orange"

    var body: some View {
        List {
            Picker("Choose a flavor", selection: $selected) {
                ForEach(flavors, id: \.self) { flavor in
                    HStack {
                        Text(flavor)
                        Spacer()
                        // 选中时显示自定义图标，未选中时隐藏
                        if flavor == selected {
                            // 可替换为任意系统图标或自定义图片
                            Image(systemName: "checkmark.circle.fill")
                                .foregroundColor(.orange)
                        }
                    }
                }
            }
            .pickerStyle(.inline)
        }
    }
}

自定义扩展说明 #

• 图标替换：你可以把Image(systemName: "checkmark.circle.fill")换成任意你需要的图标，比如本地自定义图片（使用Image("your-icon-name")），并通过.font()、.foregroundColor()等 modifier 调整样式。
• 增强视觉反馈：如果需要更明显的选中效果，还可以给选中的选项行添加背景色：

  HStack {
      // ... 原有内容
  }
  .listRowBackground(flavor == selected ? Color.orange.opacity(0.1) : Color.clear)
  

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