在 SwiftUI 中，Shapes（形状）是用于绘制和自定义图形的基础组件。它们可以轻松地被组合、修改并与其他视图一起使用，为应用添加视觉效果。SwiftUI 提供了一些内置的形状，如矩形、圆形、椭圆形等，也允许你创建自定义形状。

内置形状

SwiftUI 中有几个常用的内置形状：

Rectangle：矩形或方形
RoundedRectangle：带圆角的矩形
Circle：圆形
Ellipse：椭圆形
Capsule：胶囊形状，类似一个扁圆的矩形

使用示例：

你可以将这些形状与修饰符一起使用，来设置颜色、大小、边框等属性。以下是几个示例：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // 1. 矩形
            Rectangle()
                .fill(Color.blue) // 填充蓝色
                .frame(width: 100, height: 50) // 设置宽高
                
            // 2. 带圆角的矩形
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.green)
                .frame(width: 100, height: 50)
                
            // 3. 圆形
            Circle()
                .stroke(Color.red, lineWidth: 5) // 只描边，不填充，红色边框
                .frame(width: 100, height: 100)
                
            // 4. 椭圆形
            Ellipse()
                .fill(Color.yellow)
                .frame(width: 100, height: 50)
                
            // 5. 胶囊形状
            Capsule()
                .fill(Color.purple)
                .frame(width: 100, height: 50)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

修饰符与形状

你可以通过各种修饰符进一步自定义形状：

fill(_:)：填充形状内部，可以使用颜色或渐变。
stroke(_:lineWidth:)：仅描边形状，指定颜色和线宽。
frame(width:height:)：设置形状的大小。
border(_:width:)：为形状添加边框。
overlay(_:)：在形状上叠加另一个视图。

自定义形状

除了使用内置形状，你还可以创建自定义形状，使用 Shape 协议来绘制任意形状。以下是一个自定义三角形的示例：

import SwiftUI

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.maxX, y: rect.maxY)) // 右下角
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY)) // 左下角
        path.closeSubpath() // 闭合路径
        return path
    }
}

struct ContentView: View {
    var body: some View {
        Triangle()
            .fill(Color.orange)
            .frame(width: 100, height: 100)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

使用形状的场景

背景和边框：你可以使用形状作为背景或边框，为视图添加视觉效果。
遮罩：通过 .mask() 修饰符，可以将形状应用为遮罩，控制视图的可见区域。
按钮和装饰元素：形状可以用作按钮的背景或其他装饰元素，使 UI 更加生动。

动画与形状

形状在 SwiftUI 中可以与动画结合使用，创建动态效果。例如，你可以通过修改形状的属性来执行动画：

struct ContentView: View {

    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Circle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
            .scaleEffect(scale)
            .onTapGesture {
                withAnimation(.easeInOut(duration: 1.0)) {
                    scale = scale == 1.0 ? 1.5 : 1.0
                }
            }
    }
}

通过以上这些基础和自定义的形状，你可以在项目中灵活地创建出丰富多彩的 UI 元素。

SwiftUI-认识 Shapes