Swift 改变形状的clipShape和contentShape

clipShape 和 contentShape 在 SwiftUI 中都用于改变视图的形状，但它们的作用和应用场景有所不同：

1、clipShape

用途: 将视图“裁剪”成指定的形状（如圆形、椭圆、矩形等）。

影响: clipShape 会实际裁剪视图的内容和背景，使视图的显示区域被限制为指定的形状。

影响点击区域: 裁剪后，视图的可点击区域也会变成裁剪后的形状。

Image(systemName: "star.fill")
    .resizable()
    .frame(width: 100, height: 100)
    .background(Color.blue)
    .clipShape(Circle()) // 将图片裁剪为圆形

2、contentShape

用途: 定义视图的交互区域，即用户可以点击或触摸的区域。

影响: contentShape 不会改变视图的实际显示形状，而只是改变其响应交互的区域。

使用场景: 用于创建非矩形的点击区域，或在不裁剪内容的情况下自定义点击区域。

Text("Tap me!")
    .frame(width: 200, height: 200)
    .background(Color.green)
    .contentShape(Circle()) // 定义点击区域为圆形
    .onTapGesture {
        print("Text tapped!")
    }

在这个例子中，视图显示为绿色矩形，但只有圆形区域可响应点击事件。

常用的内建形状

在 SwiftUI 中，clipShape 和 contentShape 可以用于许多内建的形状类型，同时也可以通过自定义形状来灵活控制视图的显示方式。以下是一些常见的形状，既可以用于 clipShape，也可以用于 contentShape：

1、Rectangle：矩形形状，适合剪裁成方形或矩形。

.clipShape(Rectangle())

2、RoundedRectangle：带有圆角的矩形，可通过设置 cornerRadius 参数调整圆角弧度。

.clipShape(RoundedRectangle(cornerRadius: 20))

3、Circle：圆形，适合用于头像或圆形按钮。

.clipShape(Circle())

4、Capsule：胶囊形状。它是一种圆角矩形，适合按钮或标签等需要圆滑效果的视图。

.clipShape(Capsule())

5、Ellipse：椭圆形状，适合将内容剪裁为椭圆效果。

.clipShape(Ellipse())

6、Path：自定义路径形状，可以用 Path 创建任意自定义路径作为形状。

.clipShape(Path { path in
    path.addArc(center: CGPoint(x: 50, y: 50), radius: 50, startAngle: .zero, endAngle: .degrees(360), clockwise: true)
})

7、Custom Shapes：你也可以定义自己的形状，符合 Shape 协议即可。

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

// 使用自定义形状
.clipShape(Triangle())

总结

clipShape: 改变视图的实际外观和点击区域。

contentShape: 仅改变视图的点击区域，而不影响显示形状。