SwiftUI内置形状

SwiftUI 中形状类（Shape Protocol），常用于创建简单的几何图形，可以应用到界面设计、动画和遮罩中。SwiftUI 提供了多种内置形状，并允许自定义自己的形状。

SwiftUI 内置形状

以下是 SwiftUI 中常见的内置形状及其用途：

1、Circle：圆形，半径由父视图的大小决定。

2、Ellipse：椭圆，长宽比由父视图的大小决定。

3、Rectangle：矩形，边长由父视图的大小决定。

4、RoundedRectangle：圆角矩形，支持设置圆角半径。

5、Capsule：胶囊形状，是圆角矩形的特例，长宽比决定形状。

6、Path：自定义路径，支持绘制复杂图形（如多边形、曲线等）。

7、PolygonShape：多边形，可以自定义边的数量（需要第三方库或手动实现）。

8、Line ：线条（通常需要结合 Path 实现）。

9、Arc：弧形，可以通过自定义角度绘制（需要结合 Path 实现）。

10、Star：星形，需要自定义实现。

11、Triangle：三角形（需要自定义实现或使用 Path）。

形状使用示例

1、Circle（圆形）

Circle()
    .fill(Color.red) // 填充颜色
    .frame(width: 100, height: 100) // 设置大小

2、Rectangle（矩形）

Rectangle()
    .fill(Color.green)
    .frame(width: 100, height: 50)

3、RoundedRectangle（圆角矩形）

RoundedRectangle(cornerRadius: 20)
    .stroke(Color.blue, lineWidth: 2) // 边框颜色
    .frame(width: 100, height: 50)

4、Capsule（胶囊形状）

Capsule()
    .fill(Color.orange)
    .frame(width: 150, height: 50)

5、Ellipse（椭圆）

Ellipse()
    .fill(Color.purple)
    .frame(width: 120, height: 80)

自定义形状

通过实现 Shape 协议，可以定义自己的形状。例如：

三角形

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            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() // 闭合路径
        }
    }
}

使用自定义形状

Triangle()
    .stroke(Color.blue, lineWidth: 2)
    .frame(width: 100, height: 100)

结合形状的修饰符

形状可以与修饰符一起使用，增加灵活性：

1、fill()：填充颜色。

2、stroke(lineWidth:)：设置边框。

3、clipShape()：使用形状作为遮罩。

4、overlay()：在形状上添加叠加内容。

5、trim(from:to:)：显示形状的一部分。