ios - SwiftUI:自定义按钮无法识别具有清晰背景和 buttonStyle 的触摸

Question

我偶然发现了 Button 的奇怪行为SwiftUI 中的 s 结合自定义 ButtonStyle .

我的目标是创建一个自定义 ButtonStyle带有某种“后推动画”。我为此使用了以下设置:

struct CustomButton<Content: View>: View {
    private let content: () -> Content

    init(content: @escaping () -> Content) {
        self.content = content
    }

    var body: some View {
        VStack {
            Button(action: { ... }) {
                content()
            }
            .buttonStyle(PushBackButtonStyle(pushBackScale: 0.9))
        }
    }
}

private struct PushBackButtonStyle: ButtonStyle {
    let pushBackScale: CGFloat

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration
            .label
            .scaleEffect(configuration.isPressed ? pushBackScale : 1.0)
    }
}

// Preview
struct Playground_Previews: PreviewProvider {
    static var previews: some View {
        CustomButton {
            VStack(spacing: 10) {
                HStack {
                    Text("Button Text").background(Color.orange)
                }

                Divider()

                HStack {
                    Text("Detail Text").background(Color.orange)
                }
            }
        }
        .background(Color.red)
    }
}

当我现在尝试在 Text 之外触摸此按钮时看，什么都不会发生。没有动画可见，也不会调用 Action block 。



到目前为止我发现了什么:

当您删除 .buttonStyle(...)它确实按预期工作(当然没有自定义动画)

或者当您设置 .background(Color.red))在 VStack在 CustomButton与 .buttonStyle(...) 结合使用时，它也能按预期工作。

现在的问题是，是否有人对如何正确解决此问题或如何解决此问题有更好的了解？

Answer 1

只需在您的自定义按钮样式中添加 HitTest 内容形状，如下所示

使用 Xcode 11.4/iOS 13.4 测试

private struct PushBackButtonStyle: ButtonStyle {
    let pushBackScale: CGFloat

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration
            .label
            .contentShape(Rectangle())     // << fix !!
            .scaleEffect(configuration.isPressed ? pushBackScale : 1.0)
    }
}