SwiftUI中实现金属边缘渐变与内阴影效果的技术咨询

嘿，我来帮你搞定这个金属质感的盘子效果！你想要的金属边缘渐变和内阴影，在SwiftUI里可以通过分层组合视图、渐变和模拟阴影的方式实现，我结合你给出的代码框架，给你调整出了完整的实现方案～

首先咱们拆解一下需求：金属边缘需要模拟出高光和暗部的循环反光，内阴影则要营造出盘子内部凹陷的质感，咱们一步步来实现：

完整实现代码 #

import SwiftUI

struct GradientDishView: View {
    private let containerSize: CGFloat = 300
    
    var body: some View {
        VStack {
            Spacer()
            
            ZStack {
                // 1. 盘子主体基础层：深色底色奠定质感
                Circle()
                    .fill(Color(hex: "#2c2c2e"))
                    .frame(width: containerSize, height: containerSize)
                
                // 2. 模拟内阴影：用偏移的半透明模糊视图实现
                Circle()
                    .fill(Color.black.opacity(0.3))
                    .frame(width: containerSize - 20, height: containerSize - 20)
                    .offset(x: 2, y: 2)
                    .blur(radius: 4)
                
                // 3. 金属边缘渐变：环形渐变模拟金属反光
                Circle()
                    .strokeBorder(
                        AngularGradient(
                            gradient: Gradient(colors: [
                                Color(hex: "#f0f0f0"),
                                Color(hex: "#888888"),
                                Color(hex: "#2c2c2e"),
                                Color(hex: "#888888"),
                                Color(hex: "#f0f0f0")
                            ]),
                            center: .center,
                            startAngle: .degrees(0),
                            endAngle: .degrees(360)
                        ),
                        lineWidth: 8
                    )
                    .frame(width: containerSize, height: containerSize)
                
                // 4. 内部高光：增强金属的通透反光感
                Circle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [Color.white.opacity(0.2), Color.clear]),
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: containerSize - 30, height: containerSize - 30)
            }
            
            Spacer()
        }
        .background(Color(hex: "#1a1a1a"))
    }
}

// 辅助扩展：快速通过十六进制值创建颜色
extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 1)
        }
        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue: Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

struct GradientDishView_Previews: PreviewProvider {
    static var previews: some View {
        GradientDishView()
    }
}

关键部分说明 #

• 金属边缘渐变：用AngularGradient环形渐变来模拟金属的循环反光，颜色从亮白到深灰再回到亮白，刚好贴合圆形盘子的边缘；strokeBorder保证渐变只绘制在边缘，线宽可以根据需求调整。
• 内阴影效果：SwiftUI原生没有直接的内阴影API，咱们用一个缩小版的半透明深色Circle，轻微偏移后添加模糊，模拟出内部凹陷的阴影感，你可以调整偏移量、透明度和模糊半径来适配自己想要的效果。
• 质感增强：内部的线性渐变用来模拟盘子内部的高光，搭配深色背景，整体金属质感会更突出。

你可以根据自己的需求调整颜色值、渐变角度、视图大小这些参数，直到调出你最满意的效果～

备注：内容来源于stack exchange，提问作者batman