shape 教學 Swiftui

原创

mob64ca12e86bd4 2024-10-17 11:24:48 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e86bd4的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 SwiftUI 中使用 Shape

SwiftUI 是 Apple 推出的现代化用户界面框架，其灵活性和可组合性使得开发者能够快速构建精美的应用界面。在 SwiftUI 中，Shape 是一个非常重要的概念，它允许开发者创建各种形状，并将其用于视图中的许多方面，比如背景、边框和动画等。本文将介绍如何在 SwiftUI 中创建和使用 Shape。

Shape 的基本概念

在 SwiftUI 中，Shape 是一个协议，用于定义形状的外观和路径。要创建自己的形状，你只需遵循 Shape 协议并实现其 path(in:) 方法。

创建自定义形状

以下是一个简单的自定义形状示例，创建一个五角星形状：

import SwiftUI

struct Star: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let points = [
            CGPoint(x: rect.midX, y: rect.minY),
            CGPoint(x: rect.maxX * 0.4, y: rect.maxY * 0.35),
            CGPoint(x: rect.minX, y: rect.maxY * 0.35),
            CGPoint(x: rect.maxX * 0.3, y: rect.maxY),
            CGPoint(x: rect.maxX / 2, y: rect.maxY * 0.65),
            CGPoint(x: rect.maxX * 0.7, y: rect.maxY),
            CGPoint(x: rect.maxX, y: rect.maxY * 0.35),
            CGPoint(x: rect.maxX * 0.6, y: rect.maxY * 0.35)
        ]
        
        path.move(to: points[0])
        for i in 1..<points.count {
            path.addLine(to: points[i])
            path.addLine(to: points[0]) // 闭合五角星的路径
        }
        
        return path
    }
}

上面的代码定义了一个名为 Star 的结构体，遵循了 Shape 协议。path(in:) 方法中定义了五角星的坐标，并通过绘制点连接路径。

使用自定义形状

现在，我们可以将刚才创建的 Star 形状放入视图中，并应用一些样式。以下是一个简单的示例，演示如何在 SwiftUI 中使用自定义 Star 形状：

struct ContentView: View {
    var body: some View {
        Star()
            .fill(Color.yellow)
            .frame(width: 100, height: 100)
            .padding()
            .shadow(radius: 10)
    }
}

在这个示例中，Star 形状填充为黄色，设置框架大小为 100x100，并应用了阴影效果。

形状的变形和动画

SwiftUI 还允许对形状进行动画变换。我们可以通过 scaleEffect 或 rotationEffect 方法来实现形状的缩放和旋转。例如：

struct AnimatedStar: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Star()
            .fill(Color.yellow)
            .scaleEffect(scale)
            .onTapGesture {
                withAnimation {
                    scale = scale == 1.0 ? 1.5 : 1.0
                }
            }
            .frame(width: 100, height: 100)
            .padding()
    }
}

在这个例子中，点击星形将启动动画，使其在正常大小和 1.5 倍大小之间切换。我们使用 @State 属性包装器来保持当前缩放比例。