swiftui - 如何在 SwiftUI 中制作苹果钱包卡片背景色？

Question

我想做什么:在 SwiftUI 中通过以下描述制作苹果钱包卡:

The colors of the Apple Card shift with every single transaction youmake, at the beginning it’s white The next color changes to whateveryour first purchase happens to be. Say, for instance you buy food fordinner and Since the Food & Drink category of purchases in Apple Cardare orange-coded, you'll see an orange color bloom over the AppleCard. Your second purchase is movie thicket."Entertainment" ispink-coded in the Apple Card, so the moment you make that purchase, ablot of pink will also appear. The size of the blot of pink versus theblot of orange will depend on how much money you spent on thosepurchases.

到目前为止我做了什么(我对背景颜色有困难):

struct ContentView: View {
    
    let fourColorsGradient = Gradient(colors: [Color.blue, Color.pink, Color.yellow, Color.green])
    
    var body: some View {
        VStack {
            ZStack {
                AngularGradient(gradient:  fourColorsGradient , center: .center, startAngle: .degrees(0), endAngle: .degrees(360)).cornerRadius(30)
                    .blur(radius: 1)
                
                
            }
            .frame(width: 340, height: 210)
        }
    }
}

我发现苹果在这种情况下不使用渐变。

Answer 1

它不是 AngularGradient。这是一个多点渐变，我认为 Apple 在钱包应用程序中使用金属实现了这一点。但是您可以通过将多个渐变颜色相互合并并在所有内容之上合并一个模糊层来非常接近地模仿效果。

像这样:

代码:

struct ContentView: View {    
    let startRadius: CGFloat = 0
    let endRadius: CGFloat = 200

    var body: some View {
        ZStack {
            RadialGradient(
                colors: [.blue, .blue.opacity(0)],
                center: .bottomLeading,
                startRadius: startRadius,
                endRadius: endRadius
            )
            RadialGradient(
                colors: [.red, .red.opacity(0)],
                center: .topTrailing,
                startRadius: startRadius,
                endRadius: endRadius
            )
            RadialGradient(
                colors: [.yellow, .yellow.opacity(0)],
                center: .topLeading,
                startRadius: startRadius,
                endRadius: endRadius
            )
            
            VisualEffectView(effect: UIBlurEffect(style: .regular))
                .edgesIgnoringSafeArea(.all)
        }
        .frame(width: 200, height: 200)
    }
}

您可以使用 .blur 修饰符，但这里是 how to create VisualEffectView in SwiftUI