Question

我正在Picker中创建自定义SegmentedPickerStyle()。我希望具有相同的行为，但是当我点击内容与可能的选项之一的边框之间的区域时，onTapGesture不起作用。当我添加蓝色背景时，它可以工作，但背景清晰时，则不能。

使用蓝色背景

背景不清晰

无效的代码：

import SwiftUI

struct PickerElementView<Content>: View where Content : View {
    @Binding var selectedElement: Int
    let content: () -> Content

    @inlinable init(_ selectedElement: Binding<Int>, @ViewBuilder content: @escaping () -> Content) {
        self._selectedElement = selectedElement
        self.content = content
    }

    var body: some View {
        GeometryReader { proxy in
            self.content()
                .fixedSize(horizontal: true, vertical: true)
                .frame(minWidth: proxy.size.width, minHeight: proxy.size.height)
                // ##################################################################
                // CHANGE COLOR HERE TO BLUE TO MAKE IT WORK
                // ##################################################################
                .background(Color.clear)
                // ##################################################################
                .border(Color.yellow, width: 5)

        }
    }

}

struct PickerView: View {
    @Environment (\.colorScheme) var colorScheme: ColorScheme

    var elements: [(id: Int, view: AnyView)]

    @Binding var selectedElement: Int
    @State var internalSelectedElement: Int = 0

    private var width: CGFloat = 220
    private var height: CGFloat = 100
    private var cornerRadius: CGFloat = 20
    private var factor: CGFloat = 0.95
    private var color = Color(UIColor.systemGray)
    private var selectedColor = Color(UIColor.systemGray2)


    init(_ selectedElement: Binding<Int>) {
        self._selectedElement = selectedElement
        self.elements = [
            (id: 0, view: AnyView(PickerElementView(selectedElement) {
                    Text("9").font(.system(.title))
            })),
            (id: 1, view: AnyView(PickerElementView(selectedElement) {
                    Text("5").font(.system(.title))

            })),
        ]
        self.internalSelectedElement = selectedElement.wrappedValue
    }

    func calcXPosition() -> CGFloat {
        var pos = CGFloat(-self.width * self.factor / 4)
        pos += CGFloat(self.internalSelectedElement) * self.width * self.factor / 2
        return pos
    }

    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(self.selectedColor)
                .cornerRadius(self.cornerRadius * self.factor)
                .frame(width: self.width * self.factor / CGFloat(self.elements.count), height: self.height - self.width * (1 - self.factor))
                .offset(x: calcXPosition())
                .animation(.easeInOut(duration: 0.2))

            HStack {
                ForEach(self.elements, id: \.id) { item in
                    item.view
                        .gesture(TapGesture().onEnded { _ in
                            print(item.id)
                            self.selectedElement = item.id
                            withAnimation {
                                self.internalSelectedElement = item.id
                            }
                        })
                }
            }
        }
        .frame(width: self.width, height: self.height)
        .background(self.color)
        .cornerRadius(self.cornerRadius)
        .padding()
    }
}

struct PickerView_Previews: PreviewProvider {
    static var previews: some View {
        PickerView(.constant(1))
    }
}

更改我标记的颜色。

有人知道他们为什么表现不同吗？我该如何解决？

Answer 1

单行答案不是设置backgroundColor，而是设置contentShape进行命中测试。

 var body: some View {
    GeometryReader { proxy in
        self.content()
            .fixedSize(horizontal: true, vertical: true)
            .frame(minWidth: proxy.size.width, minHeight: proxy.size.height)
            // ##################################################################
            // CHANGE COLOR HERE TO BLUE TO MAKE IT WORK
            // ##################################################################
            .contentShape(Rectangle())
            // ##################################################################
            .border(Color.yellow, width: 5)

    }
}

Answer 2

似乎是一个设计决定，不透明度为0的任何Color都不适用。

Color.clear.onTapGesture { print("tapped") }                 // will not print
Color.blue.opacity(0).onTapGesture { print("tapped") }       // will not print
Color.blue.onTapGesture { print("tapped") }                  // will print
Color.blue.opacity(0.0001).onTapGesture { print("tapped") }  // will print

您可以使用第4个选项解决此问题，因为它与第一个选项在视觉上没有区别。

Answer 3

在默认情况下，透明视图在SwiftUI中不可点击，因为它们的内容形状为零。

您可以使用.contentShape修饰符来更改此行为：

Color.clear
  .frame(width: 300, height: 300)
  .contentShape(Rectangle())
  .onTapGesture { print("tapped") }

Answer 4

我正在努力解决类似的问题，以获取RoundedRectangle上的水龙头。

我的简单解决方案是将不透明度设置为非常低的值，并且有效

RoundedRectangle(cornerRadius: 12)
.fill(Color.black)
.opacity(0.0001)
.frame(width: 32, height: 32)
.onTapGesture {
 ...
}

SwiftUI onTapGesture在Color.clear背景上的行为与Color.blue不同

4 个答案: