使 SwiftUI 阴影不会在同级视图中渗色

Question

SwiftUI 阴影与其他内部同级视图重叠：

有没有办法解决这个问题并在这种情况下获得正确的阴影？

视图示例：

// SwiftUIPlayground
// https://github.com/ralfebert/SwiftUIPlayground/

import SwiftUI

struct ShadowsView: View {
    var body: some View {
        Color.yellow
            .ignoresSafeArea()
            .overlay(self.scrollView, alignment: .bottom)
    }

    var scrollView: some View {
        VStack {
            ForEach(1 ... 3, id: \.self) { _ in
                Color.white
                    .frame(height: 100)
                    .cornerRadius(10)
                    .shadow(color: Color.red, radius: 30, x: 0, y: 0)
            }
        }
        .padding()
        .frame(height: 200, alignment: .top)
    }
}

Answer 1

您可以使用.compositingGroup()然后应用阴影。

\n

文档指出：

\n

\n

合成组使此视图\xe2\x80\x99s 祖先视图中的合成效果（例如不透明度和混合模式）在渲染此视图之前生效。

\n

\n

这意味着视图全部合成在一起，阴影单独完成，而不是阴影受到其下面的视图的影响。

\n

代码：

\n

VStack {\n    ForEach(1 ... 3, id: \\.self) { _ in\n        Color.white\n            .frame(height: 100)\n            .cornerRadius(10)\n            // .shadow(color: Color.red, radius: 30, x: 0, y: 0)  // <- REMOVED\n    }\n}\n.compositingGroup()  // <- ADDED\n.shadow(color: Color.red, radius: 30, x: 0, y: 0)  // <- ADDED\n.padding()\n.frame(height: 200, alignment: .top)\n

\n

结果：

\n

\n