所需的菜单选择器文本颜色未正确显示

Desired menu picker text color not being shown properly

我有两个视图:CreateExerciseView 和 RepsViewStyle。虽然 CreateExerciseView 有其他视图元素,但我会压缩代码来演示我的具体问题。似乎选择器没有显示我想要的颜色,而是根本没有显示,或者在某些情况下显示为默认的蓝色文本。

这里是精简的 CreateExerciseView 代码:

struct CreateExerciseView: View {
  // Reps/Sets Properties
  @State var reps: String = "1 rep"
  @State var sets: String = "1 set"
  var body: some View {
    Group {
        // MARK: REPS AND SETS
        RepsViewStyle(reps: $reps, sets: $sets)
    }          
    .padding(.horizontal)              
  }
}

这里是 RepsViewStyle 代码:

struct RepsViewStyle: View {
    @Binding var reps: String
    @Binding var sets: String
    var body: some View {
        VStack {
            HStack {
                Text("Select repetitions and sets: ")
                    .fontWeight(.semibold)
                    .padding([.top, .trailing])
                
                Spacer()
            }
            
            Divider()
            
            HStack {
                
                Spacer()
                
                Picker(selection: $reps,
                       label: Text("\(reps)"),
                       content: {
                        ForEach(1..<100) { number in
                            if number == 1 {
                                Text("\(number) rep")
                                    .tag("\(number) rep")
                            } else {
                                Text("\(number) reps")
                                    .tag("\(number) reps")
                            }
                        }
                        
                       })
                    .pickerStyle(MenuPickerStyle())
                    .padding(12)
                    .padding(.horizontal, 20)
                    .background(Color.MyTheme.redColor)
                    .cornerRadius(10)
                    .shadow(color: Color.MyTheme.greyColor.opacity(0.3), radius: 10, x: 0, y: 10)
                    .foregroundColor(Color.white)
                    .font(.headline)
                
                
                
                Picker(selection: $sets,
                       label: Text("\(sets)"),
                       content: {
                        ForEach(1..<20) { number in
                            if number == 1 {
                                Text("\(number) set")
                                    .tag("\(number) set")
                            } else {
                                Text("\(number) sets")
                                    .tag("\(number) sets")
                            }
                        }
                        
                       })
                    .pickerStyle(MenuPickerStyle())
                    .padding(12)
                    .padding(.horizontal, 20)
                    .background(Color.MyTheme.redColor)
                    .cornerRadius(10)
                    .shadow(color: Color.MyTheme.greyColor.opacity(0.3), radius: 10, x: 0, y: 10)
                    .foregroundColor(Color.white)
                    .font(.headline)
                
                Spacer()
            }
            .padding()
        }
    }
}

我已经尝试将属性应用于从初始视图调用 RepsViewStyle 以及选取器本身,但它们似乎根本没有改变。

您可以将 .accentColor(.white) 添加到选择器,替换 .foregroundColor(Color.white) 以将“标签”颜色设置为白色, 而不是默认的蓝色,如果这是你想要实现的。

如前所述,很难在纯 SwiftUI 中设置样式 Picker,因为自定义 PickerStyles 还没有(还)public。

您的情况的解决方法可能是改用 Menu。这件的款式不错。

                Menu {
                    ForEach(1..<100) { number in
                        Button { reps = "\(number) reps" } label: {
                            if number == 1 {
                                Text("\(number) rep")
                            } else {
                                Text("\(number) reps")
                            }
                        }
                    }
                } label: {
                    Text("\(reps)")
                        .foregroundStyle(.white)
                        .font(.headline)
                        .padding(12)
                        .padding(.horizontal, 20)
                        .background(Color.red)
                        .cornerRadius(10)
                        .shadow(color: Color.gray.opacity(0.3), radius: 10, x: 0, y: 10)
                }