点击外部选择器文本不打开选择器菜单

Question

我有一个picker这样的

Picker ("", selection: $itemIndex){
    ForEach (0..<items.count, id: \.self){ index in
        Text(items[index])
    }
}
.frame(maxWidth: .infinity)
.background(.red)

问题是，选择器延伸到屏幕宽度，但是

在我单击时， 挑选器上显示的文本并不冗长，也许大约是Picker长度的1/20文本，选择器菜单会打开，但是当我单击文本外部，仍在选择器可见性中时，菜单不会打开。

在上图中，当我点击红色侧时，菜单会打开，但是当我点击两个绿色的侧面时，没有

人知道为什么会发生这种情况？

注意：选择器不在表单或navigation controller中

Answer 1

好的...因此，在这个问题，我能够自定义自己的picker样式。以下是实现此目的的代码

struct CustomPickerStyle: ViewModifier {
    
    @Binding var index: Int
    var items: [String]
    var font: SwiftUI.Font
    var padding: CGFloat
    
    func body(content: Content) -> some View {
        Menu {
            content
        } label: {
            HStack {
                if let labelText = items[index] {
                    Text(labelText)
                        .font(font)
                    Spacer()
                    Image(systemName: "triangle.fill")
                        .resizable()
                        .frame(width: 12, height: 8)
                        .rotationEffect(.degrees(180))
                }
            }
            .padding(padding)
            .frame(alignment: .leading)
            .background(Colors.white)
        }
    }
    
}

extension View {
    
    func customPickerStyle(index: Binding<Int>, items: [String], font: SwiftUI.Font, padding: CGFloat) -> some View {
        self.modifier(CustomPickerStyle(index: index, items: items, font: font, padding: padding))
    }
}

，这就是我在UI中使用它的方式

Picker("", selection: $itemIndex){
    ForEach(0..<items.count, id: \.self){ index in
        Text(items[index])
    }
}
.customPickerStyle(index: $itemIndex, items: items, font: .system(size: 17), padding: 10)
.frame(width: UIScreen.main.bounds.width - 50)
.overlay(RoundedRectangle(cornerRadius: 10.0).stroke(.blue, lineWidth: 1.0))

，这是结果

< img src =“ https://i.sstatic.net/7ittv.png” alt =“在此处输入图像说明”>

Answer 2

我假设您想要这个

Picker ("", selection: $itemIndex){
    ForEach (0..<items.count, id: \.self) { index in
        Text(items[index])
           .frame(maxWidth: .infinity)    // << here !!
    }
}
.background(.red)

或这样做，如果您告诉有关菜单

    Menu {

      // content here

    } label: {
        Text("Menu")
            .frame(maxWidth: .infinity)    // << here !!
    }

一般规则是 - 为标签提供空间，而该标签的空间实际上显示而不是包含控件，因为通常由固有内容设置hit Testing。