SwiftUI实现视图与文本局部透明效果的技术求助

要实现让指定区域透出背景渐变的效果，核心是利用混合模式将目标区域从白色背景中"挖空"，而非直接设置透明度。以下是修改后的代码及说明：

struct CircleView: View {
    var body: some View {
        ZStack {
            // 底层背景渐变
            LinearGradient(colors: [.mint, .cyan], startPoint: .topLeading, endPoint: .bottomTrailing)
            
            HStack(spacing: -20) {
                // 左侧牛油果白色圆圈
                ZStack {
                    Circle()
                        .frame(width: 120, height: 120)
                        .foregroundColor(.white)
                    Text("🥑")
                        .font(.system(size: 60))
                }
                
                // 右侧带透明边框+文字的圆圈
                ZStack {
                    // 白色基础背景层
                    Circle()
                        .fill(.white)
                        .frame(width: 75, height: 75)
                    
                    // 需要透出背景的内容（边框+文字）
                    ZStack {
                        Circle()
                            .strokeBorder(lineWidth: 5)
                        VStack {
                            Text("108")
                            Text("Days")
                        }
                        .font(.bold)
                    }
                    // 混合模式：将该区域从白色背景中挖空
                    .blendMode(.destinationOut)
                }
                // 合成组：确保混合模式仅作用于当前ZStack内部元素
                .compositingGroup()
            }
        }
    }
}

关键逻辑说明 #

• 混合模式：.blendMode(.destinationOut)会将当前视图区域的底层内容（白色背景）清除，从而透出更下方的渐变背景。
• 合成组：.compositingGroup()将右侧ZStack的内容打包为一个独立渲染单元，避免混合模式影响其他视图的显示。
• 移除了原代码中的.purple设置，因为我们不需要实际的紫色填充，而是要让这些区域变为透明通道，透出背景渐变。

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