SwiftUI 中 Picker 控件的背景颜色

Question

我有一个选择器控件 (SwiftUI)，但无法正确设置背景颜色。

在下面，我将背景设置为绿色，但请注意文本本身周围有一个稍暗的覆盖颜色。

见下面的“一”字。选择器控件的文本组件上有一个黑色覆盖层。

此行为仅在物理 iPhone 上出现，但在模拟器上不会显示。

示例的完整代码如下。

我想要实现的效果就像模拟器上显示的那样，其中选择器控件的背景绿色与其上方的文本视图的背景绿色完全相同。

是否可以实现选择器控件而不在控件的文本部分周围使用较暗的覆盖颜色？

import SwiftUI

struct Test: View {
    var items = ["One", "Two", "Three", "Four"]
    @State private var selection = "One"

    var body: some View {
        VStack {
            Text("Text")
                .foregroundStyle(.white)
                .frame(width: 150, height: 35)
                .background(.green)
        
            Picker("Please choose an item", selection: $selection) {
                ForEach(items, id: \.self) {
                    Text($0)
                }
            }
            .frame(width: 150, height: 35)
            .background(.green)
            .tint(.white)
        
            Text("You selected: \(selection)")
            Spacer()
        }
        .padding(.top,50)
    }
}

#Preview {
    Test()
}

Answer 1

出现这种效果可能是因为辅助功能设置中打开了按钮形状。我可以通过打开按钮形状在模拟器上重现它。

可以使用叠加来掩盖效果。使用

.allowsHitTesting(false)

可以允许点击传递到底层选择器。然而，以这种方式使用覆盖可能不是一个好主意，原因如下：

• 阴影区域实际上是唯一可以点击的区域。即使关闭按钮形状，选择器也不会响应阴影区域之外的区域中的点击。因此，按钮形状实际上在识别可点击区域方面起到了有用的作用。

• 覆盖不会提供任何类型的按钮按下效果。

如果您确实想避免这种效果，并且可能更重要的是，让控件能够在其整个宽度上接受点击手势，那么自定义选择器可能是最好的解决方案。一种方法是使用

Menu

来模拟选择器功能，请参阅 在显示大字体符号时增加选择器大小/下拉菜单的答案作为示例。