SwiftUI Picker用Rectangle替代Text显示颜色出现空白问题求助

核心问题 #

你的代码存在三个关键问题，导致界面出现大量空白且交互异常：

• 类型不匹配：@State var teamColor是ColorSquare类型，但Picker选项的tag用的是Color，Picker无法正确关联选中状态，同时干扰布局计算。
• 选项尺寸过小：scaleEffect(0.025)把颜色方块缩到几乎不可见，Picker为选项预留的默认空间就变成了空白。
• Picker默认样式问题：iOS默认的Picker是全屏表单样式，会占据大量屏幕空间，需要指定更紧凑的样式。

修正后的代码 #

1. 调整ColorSquare结构体 #

移除不必要的scaleEffect，直接设置固定尺寸，同时简化Hashable实现（Color本身已遵循Hashable）：

struct ColorSquare: View, Hashable {
    var color: Color
    
    static func == (lhs: ColorSquare, rhs: ColorSquare) -> Bool {
        lhs.color == rhs.color
    }
    
    func hash(into hasher: inout Hasher) {
        hasher.combine(color)
    }
    
    var body: some View {
        Rectangle()
            .fill(color)
            .frame(width: 30, height: 30) // 直接设置固定尺寸
            .cornerRadius(4) // 可选：添加圆角提升美观度
    }
}

2. 修正TeamColorPicker的Picker实现 #

确保tag类型与selection一致，同时指定紧凑的Picker样式，适配不同场景：

struct TeamColorPicker: View {
    @State var teamColor: ColorSquare = ColorSquare(color: .blue)
    // 直接用Color数组更可靠，避免字符串转Color的潜在兼容性问题
    private let listOfColorsAvailable: [Color] = [.red, .blue, .teal, .green, .yellow, .orange]
        
    var body: some View {
        VStack(spacing: 16) {
            Text("Selected Color")
            ColorSquare(color: teamColor.color)
                .frame(width: 50, height: 50)
            
            Picker("Team Color", selection: $teamColor) {
                ForEach(listOfColorsAvailable, id: \.self) { color in
                    ColorSquare(color: color)
                        .tag(ColorSquare(color: color)) // tag类型与selection严格匹配
                }
            }
            .pickerStyle(SegmentedPickerStyle()) // 横向分段样式，紧凑不占空间
            // 若选项较多，可改用菜单样式：.pickerStyle(MenuPickerStyle())
        }
        .padding()
    }
}

额外说明 #

• 如果坚持使用字符串数组，需确保字符串是SwiftUI Color支持的标准命名（比如"Red"对应.red），但直接使用Color数组能避免命名错误风险。
• 不同pickerStyle适配不同场景：SegmentedPickerStyle适合少量选项的横向展示，MenuPickerStyle适合多选项的下拉菜单，WheelPickerStyle适合滚动选择场景。

内容的提问来源于stack exchange，提问作者Daniel Wells Jr