如何在标签文本之外选择具有 MenuPickerStyle 的选取器

Question

我有一个简单的菜单选择器，将其放置在圆角矩形边框和 V 形图像内。我希望用户能够点击此矩形内的任何位置来激活选择器选项的显示，但无论如何它似乎只能在实际文本中选择（请参见带有突出显示的蓝色边框的图像）。有没有办法在不缩放文本的情况下实现这一目标？

我尝试过添加填充和缩放修饰符，但没有这样的运气。

var body: some View {
    ZStack {
        HStack {
            Rectangle()
                .foregroundColor(Color.black)
                .frame(height: 40)
            Image(uiImage: Icon.chevronDown.image())
                .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8))
        }
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Color.black, lineWidth: 1)
        )
        .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
        Picker(selectedOption, selection: $selectedOption) {
            ForEach(options, id: \.self) { option in
                Text(option)
            }
        }
        .pickerStyle(MenuPickerStyle())
    }
}

如何使圆形黑色边框和蓝色文本之间的白色区域可选择以激活菜单选择器选项，就像点击实际的蓝色文本一样？

Answer 1

使用Picker(selection:label:content:)，它将视图作为label:参数。将您想要的所有内容作为可点击视图放入label:中，如下所示：

\n

var body: some View {\n        \n    Picker(selection: $selectedOption, label:\n            \n            HStack {\n                Rectangle()\n                    .foregroundColor(Color(.systemBackground))\n                    .frame(height: 40)\n                Image(systemName: "chevron.down")\n                    .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8))\n            }\n            .overlay(\n                RoundedRectangle(cornerRadius: 5)\n                    .stroke(Color.black, lineWidth: 1)\n            )\n            .overlay(\n                Text("Picker Option \\(selectedOption)")\n            )\n            .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))\n    ) {\n        ForEach(options, id: \\.self) { option in\n            Text("Picker Option \\(option)")\n        }\n    }\n    .pickerStyle(MenuPickerStyle())\n}\n

\n

更新：上面的代码在 Xcode 13 beta 5 中不起作用。希望它是一个错误，但如果不是，这里有一个解决方法：将选择器放在菜单中！

\n

var body: some View {\n        \n    Menu {\n        Picker("picker", selection: $selectedOption) {\n            ForEach(options, id: \\.self) { option in\n                Text("Picker Option \\(option)")\n            }\n        }\n        .labelsHidden()\n        .pickerStyle(InlinePickerStyle())\n\n    } label: {\n\n        HStack {\n            Rectangle()\n                .foregroundColor(Color(.systemBackground))\n                .frame(height: 40)\n            Image(systemName: "chevron.down")\n                .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8))\n        }\n        .overlay(\n            RoundedRectangle(cornerRadius: 5)\n                .stroke(Color.black, lineWidth: 1)\n        )\n        .overlay(\n            Text("Picker Option \\(selectedOption)")\n        )\n        .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))\n    }\n}\n

\n