SwiftUI 如何实现仅倾斜线段本身可点击而非整个视图frame

该问题的本质是SwiftUI按钮默认的点击响应区域为内容视图的完整frame，自定义的AngleLine作为Shape类型默认会填充满父视图分配的所有可用空间，即便仅绘制了一条倾斜线段，整个frame范围都会被识别为可点击区域。

可以通过contentShape修饰符手动指定按钮的可点击区域为线段的实际绘制路径，即可实现仅线段本身响应点击的效果。如果需要虚线的空白间隙也不响应点击，传入的路径需要使用和绘制时一致的虚线配置。为了提升点击易用性，可以适当扩大路径的线宽作为点击容差。

原有AngleLine无需修改：

struct AngleLine: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        }
    }
}

修改后的LineSelector代码如下：

struct LineSelector: View {
    var lineWidth : CGFloat
    let dash : [CGFloat] = [6, 3]
    let size : CGFloat
    
    var body: some View {
        Button(action: {
            print("Hello")
        }) {
            AngleLine()
                .stroke(style: StrokeStyle(lineWidth: lineWidth, dash: dash))
                .fill(Color.red)
        }
        // 用传入的size固定控件尺寸，避免占满整个屏幕
        .frame(width: size, height: size)
        // 指定点击区域为线段实际绘制路径，lineWidth+2是点击容差，可根据需求调整
        .contentShape(AngleLine().strokedPath(StrokeStyle(lineWidth: lineWidth + 2, dash: dash)))
    }
}

如果不需要保留虚线间隙的不可点击属性，只需要线段的矩形轮廓作为点击区域，可以去掉StrokeStyle中的dash参数，点击范围会变成线段的整体矩形包围盒，点击虚线间隙也会触发响应。

内容的提问来源于stack exchange，提问作者yawnobleix