SwiftUI，具有统一阴影的多个形状？

Question

SwiftUI 中有没有一种方法可以合并两个形状，以便它们投射出统一的阴影。我尝试了各种组合和修改器，但似乎无法实现我所追求的外观。任何见解将不胜感激。

struct CardView: View {
    var body: some View {
        Group {
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.orange)
                .frame(width: 200, height: 250)
                .zIndex(0)
            Circle()
                .trim(from: 0.5, to: 1)
                .fill(Color.orange)
                .frame(width: 100, height: 100)
                .offset(y: -125)
                .zIndex(1)
        }.shadow(color: Color.black, radius: 10, x: 0, y: 0)
    }
}

这就是我所得到的，也是我所追求的...

注意：zIndex 只是我尝试过的，即两个形状具有相同的 zIndex 等。这也是一种无需在容器内移动形状即可重新排序的快速方法。

Answer 1

这是可能的解决方案。使用 Xcode 11.4 / iOS 13.4

测试

struct CardView: View {
    var body: some View {
        VStack(spacing: 0) {
            Circle()
                .trim(from: 0.5, to: 1)
                .fill(Color.orange)
                .frame(width: 100, height: 100)
                .offset(x: 0, y: 50)
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.orange)
                .frame(width: 200, height: 250)
        }
        .compositingGroup()
        .shadow(color: Color.primary, radius: 10, x: 0, y: 0)
    }
}

backup

Answer 2

我认为正确答案是@Asperi 的 .compositingGroup，如此处所述 (https://developer.apple.com/documentation/swiftui/group/3284789-compositinggroup)，但我想留下一个不同的工作版本，因为在某些用例中您可能不会能够或想要使用 .compositingGroup.

那么我们来看.background，可以复制粘贴代码在模拟器中查看：

import SwiftUI

struct AnyShapedView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.orange)
                .frame(width: 200, height: 250)
                .zIndex(0)
            Circle()
                .trim(from: 0.5, to: 1)
                .fill(Color.orange)
                .frame(width: 100, height: 100)
                .offset(y: -125)
                .zIndex(1)
        }
    }
}

struct ContentView: View {
    var body: some View {
        AnyShapedView()
        .background(
            AnyShapedView()
            .shadow(color: Color.black, radius: 10, x: 0, y: 0)
        )
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

输出：

上面的版本不是最佳实践，但尽管如此，请尝试了解形状和裁剪的工作原理，因为在某些用例中它可能会有用。

SwiftUI，具有统一阴影的多个形状？

SwiftUI, multiple shapes with unified shadow?

shadow

shapes

swiftui