ios - 有没有办法增加 SwiftUI 中选取器的可点击区域？

Question

我创建了一个比原生 SwiftUI 选择器更大的自定义选择器。该选择器在 iPad 上使用，这就是为什么我需要它比平时更大。当我使用选择器时，我无法点击填充部分。仅当我直接点击选择器的水平中心时，选择器才会打开。我读过有关使用 .frame() 修饰符来更改按钮等内容的可点击区域的信息，但是当我尝试向基本选取器本身添加框架修饰符时，这似乎不起作用。 Here is an image of the additional area (in orange) I would like to make tappable

这是我的代码:

import SwiftUI

struct CustomPickerStyle: ViewModifier {
    var labelText: String
    var width: CGFloat
    
    func body(content: Content) -> some View {
        Menu {
            content
        } label: {
            HStack {
                if let labelText = labelText {
                    Text(labelText)
                        .font(.title2)
                        .fontWeight(.bold)
                    Spacer()
                    Image(systemName: "triangle.fill")
                        .resizable()
                        .frame(width: 12, height: 8)
                        .rotationEffect(.degrees(180))
                }
            }
        }
        .frame(maxWidth: width, alignment: .leading)
        .padding()
        .background(.white)
        .overlay(
            RoundedRectangle(cornerRadius: 3)
                .stroke(.gray, lineWidth: 2)
        )
    }
}

extension View {
    func customPickerStyle(labelText: String, width: CGFloat) -> some View {
        self.modifier(CustomPickerStyle(labelText: labelText, width: width))
    }
}

struct CustomPicker: View {
    enum Flavor: String, CaseIterable, Identifiable {
        case chocolate, vanilla, strawberry
        var id: Self { self }
    }
    
    @State private var selectedFlavor: Flavor = .chocolate
    
    var body: some View {
        Picker("Flavor", selection: $selectedFlavor) {
            Text("Chocolate").tag(Flavor.chocolate)
            Text("Vanilla").tag(Flavor.vanilla)
            Text("Strawberry").tag(Flavor.strawberry)
        }
        .customPickerStyle(labelText: selectedFlavor.rawValue, width: 200)
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        CustomPicker()
    }
}

Answer 1

只需将内边距和背景样式直接移动到标签内即可:

struct CustomPickerStyle: ViewModifier {
    var labelText: String
    var width: CGFloat
    
    func body(content: Content) -> some View {
        Menu {
            content
        } label: {
            HStack {
                if let labelText = labelText {
                    Text(labelText)
                        .font(.title2)
                        .fontWeight(.bold)
                    Spacer()
                    Image(systemName: "triangle.fill")
                        .resizable()
                        .frame(width: 12, height: 8)
                        .rotationEffect(.degrees(180))
                }
            }
            .frame(maxWidth: width, alignment: .leading)
            .padding()
            .background(.white)
            .overlay(
                RoundedRectangle(cornerRadius: 3)
                    .stroke(.gray, lineWidth: 2)
            )
        }
    }
}