更改 SwiftUI 中选取器/切换的背景

Question

我正在创建一个基本的冥想应用程序，以继续学习 SwiftUI。我不确定如何使选取器和切换视图具有与表单中使用的背景相同的背景，即不是 .splashBackground 而是下面的这一行：

.background(colorScheme == .dark ? Color.opacityDark : Color.white.opacity(0.7))

---

    var body: some View {
        ZStack {
            Color.splashBackground
                .ignoresSafeArea()
            
            VStack {
                
                Text("Meditation Settings")
                    .font(.title)
                    .fontWeight(.ultraLight)
                    .padding()
                    .background(Color.blue.opacity(0.2))
                    .cornerRadius(10)
                
                Form {
                    Section {
                        Picker(selection: $meditationTime, label: Text("Meditation Time").font(.footnote)) {
                            ForEach(1..<181, id: \.self) { minute in
                                Text("\(minute) min").tag(minute)
                                    .background(Color.splashBackground)
                            }
                        }
                    }
                    
                    
                    Section {
                        Toggle(isOn: $isCountdownEnabled) {
                            Text("Enable Countdown")
                                .font(.footnote)
                        }.tint(Color.themeAccent2)
                        
                        if isCountdownEnabled {
                            Picker(selection: $countdownTime, label: Text("Countdown Time").font(.footnote)) {
                                ForEach(Array(stride(from: 5, through: 60, by: 5)), id: \.self) { second in
                                    Text("\(second) sec").tag(second)
                                }
                            }
                            
                        }
                    }
                    
                    Section {
                        Toggle(isOn: $isBackgroundSoundEnabled) {
                            Text("Enable Background Sound")
                                .font(.footnote)
                        }.tint(Color.themeAccent2)
                        
                        if isBackgroundSoundEnabled {
                            Picker("Background Sound", selection: $backgroundSound) {
                                ForEach(backgroundSounds, id: \.self) { sound in
                                    Text(sound).tag(sound)
                                }
                            }
                        }
                    }
                    
                    Section {
                        Toggle(isOn: $isBellIntervalEnabled) {
                            Text("Enable Bell Interval")
                                .font(.footnote)
                        }.tint(Color.themeAccent2)
                        
                        if isBellIntervalEnabled {
                            Picker(selection: $bellInterval, label: Text("Bell Interval").font(.footnote)) {
                                ForEach(bellIntervals, id: \.self) { interval in
                                    Text(interval).tag(interval)
                                        .font(.footnote)
                                }
                            }
                        }
                    }
                    
                    Section {
                        Toggle(isOn: $endingBell) {
                            Text("Enable Ending Bell")
                                .font(.footnote)
                        }.tint(Color.themeAccent2)
                    }
                    
                    Section {
                        Button(action: startMeditation) {
                            Text("Start Meditation")
                                .foregroundStyle(Color.themeText)
                                .font(.subheadline)
                                .fontWeight(.semibold)
                                .italic()
                                .frame(maxWidth: .infinity, alignment: .center)
                        }
                        
                    
                        
                    }
                    
                    
                }
                .scrollContentBackground(.hidden)
                .background(colorScheme == .dark ? Color.opacityDark : Color.white.opacity(0.7))
                .cornerRadius(10)
                .shadow(radius: 10)
                .padding()
                
                
            }
            
        }
        
    }
    

我尝试过色调、重音、背景等，但似乎没有内置方法来更改选择器/切换视图本身的颜色，它仍然是白色的。

Answer 1

注意：请参阅上面我的评论，了解如何更轻松地获得问题的答案。

您遇到的问题实际上并不是选择器或切换器，因为您已经使用 .tint() 影响了切换器的颜色。

实际问题在于每个表单行的背景。表单的行为与列表非常相似，因为它提供了自己的默认样式。这意味着在大多数情况下，您实际上可以使用列表修饰符来更改外观。

因此，要删除每行（在您的情况下为“部分”）的默认背景，请为每个部分添加带有清晰颜色的

.listRowBackground

修饰符：

Section {
       Toggle(isOn: $endingBell) {
       Text("Enable Ending Bell")
           .font(.footnote)
       }
       .tint(Color.themeAccent2)
}
.listRowBackground(Color.clear) // <-- This removes the background of a row/section, allowing for the background colour to be shown