swiftUI 中像盒子一样的阴影

Question

我添加了一个VStack，我添加了3个元素，如顶部、中间和底部，并分别添加阴影。问题是即使将间距添加为 0 后，元素之间的间隙仍为 1px。 顶部元素将有尾随、前导和底部阴影 中间只有前导和尾随阴影 底部将有前导、尾随和底部阴影。 我尝试添加偏移量但没有改善

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("Test")
                .padding()
                .background(
                    Color.white
                        .clipShape(
                            .rect(topLeadingRadius: 12, bottomLeadingRadius: 0, bottomTrailingRadius: 0, topTrailingRadius: 12)
                        )
                )
                .shadow(color: .black.opacity(0.5), radius: 5)
                .addShadow(topPadding: -30, bottomPadding: 0, trailingPadding: -30, leadingPadding: -30)
            
            Text("Test")
                .padding()
                .background(
                    Color.white
                        .clipShape(
                            .rect(topLeadingRadius: -2, bottomLeadingRadius: -2, bottomTrailingRadius: -2, topTrailingRadius: -2)
                        )
                )
                .offset(x: 0, y: -1)
                .shadow(color: .black.opacity(0.5), radius: 5)
                .addShadow(topPadding: 0, bottomPadding: 0, trailingPadding: -30, leadingPadding: -30)

            
            Text("Test")
                .padding()
                .background(
                    Color.white
                        .clipShape(
                            .rect(topLeadingRadius: 0, bottomLeadingRadius: 2, bottomTrailingRadius: 2, topTrailingRadius: 0)
                        )
                )
[enter image description here](https://i.sstatic.net/2dRrCOM6.png)                .shadow(color: .black.opacity(0.5), radius: 5)
                .addShadow(topPadding: 0, bottomPadding: -30, trailingPadding: -30, leadingPadding: -30)

        }
    }
}

struct MaskModifier: ViewModifier {
    let topPadding: CGFloat
    let bottomPadding: CGFloat
    let trailingPadding: CGFloat
    let leadingPadding: CGFloat
    
    init(
        topPadding: CGFloat,
        bottomPadding: CGFloat,
        trailingPadding: CGFloat,
        leadingPadding: CGFloat
    ) {
        self.topPadding = topPadding
        self.bottomPadding = bottomPadding
        self.trailingPadding = trailingPadding
        self.leadingPadding = leadingPadding
    }
    func body(content: Content) -> some View {
        content
        .mask(
            Rectangle()
                .padding(.top, topPadding)
                .padding(.leading, leadingPadding)
                .padding(.trailing, trailingPadding)
                .padding(.bottom, bottomPadding)

        )
    }
}
extension View {
    func addShadow(topPadding: CGFloat,
                     bottomPadding: CGFloat,
                     trailingPadding: CGFloat,
                     leadingPadding: CGFloat) -> some View {
        modifier(MaskModifier(topPadding: topPadding, bottomPadding: bottomPadding, trailingPadding: trailingPadding, leadingPadding: leadingPadding))
    }
}

Answer 1

尝试将阴影移动到每个视图的背景并删除偏移：

VStack(spacing: 0) {
    Text("Test")
        .padding()
        .background(
            Color.white
                .clipShape(
                    .rect(topLeadingRadius: 12, bottomLeadingRadius: 0, bottomTrailingRadius: 0, topTrailingRadius: 12)
                )
                .shadow(color: .black.opacity(0.5), radius: 5)
                .addShadow(topPadding: -30, bottomPadding: 0, trailingPadding: -30, leadingPadding: -30)
        )

    // ...etc
}

或者，如果您希望阴影看起来在整个

VStack

周围是连续的，则将背景及其阴影移动到

VStack

。那么就不需要使用遮罩来剪辑阴影的不同部分了：

VStack(spacing: 0) {
    Text("Test")
        .padding()

    Text("Test")
        .padding()

    Text("Test")
        .padding()
}
.background {
    Color.white
        .clipShape(
            .rect(topLeadingRadius: 12, bottomLeadingRadius: 2, bottomTrailingRadius: 2, topTrailingRadius: 12)
        )
        .shadow(color: .black.opacity(0.5), radius: 5)
}