SwiftUI中为缩放1.7的圆形添加与背景一致渐变时出现全黑异常的技术问询

I have this SwiftUI login screen code, and I want to apply the same linear gradient as the background to the circle with scale 1.7. But when I use .background(LinearGradient(...)) on that circle, it turns completely black. How can I fix this?

My code:

import SwiftUI
struct LoginScreen: View {
    var body: some View {
        NavigationView {
            ZStack {
                LinearGradient(colors: [.blue, .black], startPoint: .topLeading, endPoint: .bottomTrailing)
                Circle()
                    .scale(1.3)
                    .foregroundColor(.white.opacity(0.6))
                Circle()
                    .scale(1.7)
                    .foregroundColor(.white.opacity(0.3))
            }
            .navigationBarHidden(true)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

The issue happens because a default Circle has a solid black fill — when you add a background modifier, it sits behind this black fill, so you can't see the gradient at all. Instead of using background, you need to apply the gradient directly as the fill of the circle, while maintaining the transparency effect you had before.

Here are two straightforward ways to fix this:

Option 1: Use fill() with a transparent gradient #

Adjust the gradient colors to include the 0.3 opacity you used earlier, then apply it as the circle's fill:

import SwiftUI
struct LoginScreen: View {
    var body: some View {
        NavigationView {
            ZStack {
                // Background gradient
                LinearGradient(colors: [.blue, .black], startPoint: .topLeading, endPoint: .bottomTrailing)
                
                Circle()
                    .scale(1.3)
                    .foregroundColor(.white.opacity(0.6))
                
                // Modified circle with matching gradient + transparency
                Circle()
                    .scale(1.7)
                    .fill(
                        LinearGradient(
                            colors: [.blue.opacity(0.3), .black.opacity(0.3)],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
            }
            .navigationBarHidden(true)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

Option 2: Use foregroundStyle() + opacity() #

If you want to reuse the exact same gradient (without modifying color opacities), you can define the gradient as a variable, then apply it with foregroundStyle and add an opacity modifier:

import SwiftUI
struct LoginScreen: View {
    // Reusable gradient variable
    private let backgroundGradient = LinearGradient(
        colors: [.blue, .black],
        startPoint: .topLeading,
        endPoint: .bottomTrailing
    )
    
    var body: some View {
        NavigationView {
            ZStack {
                backgroundGradient
                
                Circle()
                    .scale(1.3)
                    .foregroundColor(.white.opacity(0.6))
                
                Circle()
                    .scale(1.7)
                    .foregroundStyle(backgroundGradient)
                    .opacity(0.3) // Apply the transparency here
            }
            .navigationBarHidden(true)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

Both approaches will give you the semi-transparent gradient circle you want, matching the background's gradient direction and colors, without the circle turning black.

内容的提问来源于stack exchange，提问作者user16680387