SwiftUI中rotation3DEffect导致ultraThinMaterial消失问题求助

问题原因 #

这是SwiftUI渲染引擎的行为冲突：当rotation3DEffect（触发3D渲染管线）、shadow（修改视图合成层级）、ultraThinMaterial（依赖系统模糊纹理渲染）三者作用在同一视图层级时，阴影的合成逻辑会干扰Material纹理的3D变换渲染，最终导致纹理丢失。

解决方案 #

方案1：拆分阴影与Material视图层级 #

将阴影和带Material背景的视图分离到ZStack的不同层级，让阴影作为底层占位视图，Material视图在上层。这样3D变换时，Material的渲染不会被阴影逻辑干扰：

struct ViewWithShadow: View {
    private let shadowValues: (radius: CGFloat, x: CGFloat, y: CGFloat) = (1,2,2)
    
    var body: some View {
        ZStack {
            // 底层单独渲染阴影
            Color.clear
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .cornerRadius(20)
                .shadow(color: .primary.opacity(0.3), radius: shadowValues.radius, x: shadowValues.x, y: shadowValues.y)
            
            // 上层渲染Material背景视图
            ZStack {}
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.ultraThinMaterial)
                .cornerRadius(20)
        }
    }
}

方案2：使用compositingGroup()合并渲染组 #

通过compositingGroup()将Material背景和圆角修饰符打包成独立合成组，再添加阴影。SwiftUI会先完成组内的Material纹理渲染，再处理阴影和3D变换，避免冲突：

struct ViewWithShadow: View {
    private let shadowValues: (radius: CGFloat, x: CGFloat, y: CGFloat) = (1,2,2)
    
    var body: some View {
        ZStack {}
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.ultraThinMaterial)
            .cornerRadius(20)
            .compositingGroup() // 合并为一个渲染组
            .shadow(color: .primary.opacity(0.3), radius: shadowValues.radius, x: shadowValues.x, y: shadowValues.y)
    }
}

效果验证 #

修改后，触发rotation3DEffect时，ultraThinMaterial纹理会正常保留，阴影也能正确显示，符合预期效果。

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