SwiftUI 的图层与阴影效果

在 SwiftUI 中，可以通过图层和阴影效果增强视图的视觉表现力。这些效果可以使界面看起来更立体，更具吸引力。以下是关于如何使用图层和阴影效果的介绍和示例。

1. 图层效果

图层效果包括填充颜色、边框、圆角等。这些效果可以直接应用于 SwiftUI 的视图。

示例：基本图层效果

import SwiftUI

struct LayerEffectExample: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .fill(Color.blue) // 填充颜色
            .frame(width: 200, height: 100) // 设置大小
            .overlay(
                RoundedRectangle(cornerRadius: 20)
                    .stroke(Color.black, lineWidth: 3) // 设置边框
            )
            .shadow(color: Color.black.opacity(0.3), radius: 5, x: 0, y: 5) // 设置阴影
            .padding()
    }
}

2. 阴影效果

阴影可以使视图浮动于背景之上，从而增加层次感。可以自定义阴影的颜色、模糊半径和偏移量。

示例：阴影效果

struct ShadowEffectExample: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .font(.largeTitle)
                .padding()
                .background(Color.yellow) // 设置背景颜色
                .cornerRadius(10) // 设置圆角
                .shadow(color: Color.black.opacity(0.5), radius: 10, x: 5, y: 5) // 设置阴影
            
            Spacer()
            
            Circle()
                .fill(Color.red)
                .frame(width: 100, height: 100) // 设置大小
                .shadow(color: Color.gray.opacity(0.6), radius: 10, x: 0, y: 10) // 设置阴影
        }
        .padding()
    }
}

3. 组合图层和阴影效果

你可以组合使用图层效果和阴影效果，以实现更复杂的视觉效果。

示例：组合效果

struct CombinedLayerAndShadowExample: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.green)
                .frame(width: 200, height: 100) // 设置大小
                .cornerRadius(15) // 设置圆角
                .shadow(color: Color.black.opacity(0.4), radius: 10, x: 5, y: 5) // 设置阴影
                .overlay(
                    Rectangle()
                        .stroke(Color.white, lineWidth: 4) // 设置白色边框
                        .cornerRadius(15)
                )
        }
        .padding()
    }
}

4. 动态阴影效果

可以使用状态和动画创建动态的阴影效果，增强交互性。

示例：动态阴影效果

struct DynamicShadowExample: View {
    @State private var isPressed = false

    var body: some View {
        Button(action: {
            withAnimation {
                isPressed.toggle() // 切换状态
            }
        }) {
            Text("Press Me")
                .font(.title)
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(10)
                .shadow(color: isPressed ? Color.black.opacity(0.5) : Color.clear, radius: isPressed ? 15 : 0, x: 0, y: 5) // 动态阴影
        }
        .padding()
    }
}

5. 总结

  • 图层效果：使用填充、边框和圆角来增强视图的外观。
  • 阴影效果：通过阴影增加层次感和立体感，可以自定义阴影的颜色、模糊和偏移量。
  • 组合效果：结合图层和阴影，创造复杂的视觉效果。
  • 动态效果：使用动画和状态动态改变阴影效果，提升用户交互体验。

通过使用图层和阴影效果，你可以为 SwiftUI 应用增添更多视觉深度和吸引力。

Last Updated::