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

Question

我偶然发现了ButtonSwiftUI 中 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视图外触摸这个按钮时，什么也不会发生。没有动画可见，也不会调用动作块。

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

• 当您删除.buttonStyle(...)它时，它确实按预期工作（当然没有自定义动画）
• 或者当您在中设置 a.background(Color.red))时VStack，CustomButton它也可以与预期结合使用.buttonStyle(...)

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

Answer 1

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

使用 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)
    }
}