SwiftUI：VStack 中的阴影？答案

【问题标题】：SwiftUI: Shadow on view in VStack?SwiftUI：VStack 中的阴影？
【发布时间】：2021-09-14 15:30:09
【问题描述】：

我有以下代码：

struct ViewA: View {
        
    var body: some View {
        Rectangle()
            .fill(Color(.yellow))
    }
}
    
struct ViewB: View {
        
    var body: some View {
        Rectangle()
            .fill(Color(.white))
    }
}
    
struct ViewC: View {
        
    var body: some View {
        Rectangle()
            .fill(Color(.blue))
    }
}


struct TestView: View {


    var body: some View {
        
        GeometryReader { geo in
            
            
            VStack(spacing: 0) {
                
                ViewA()
                    .frame(width: geo.size.width, height: geo.size.width/4, alignment: .center)
                    .shadow(color: .black, radius: 10, x: 0, y: 10)
                
                ViewB()
                
                ViewC()
                    .frame(width: geo.size.width, height: 100, alignment: .center)
                    .shadow(color: .black, radius: 10, x: 0, y: 0)
                    .opacity(0.8)
                
            }
            
        }
    }
}

它画了：

底部蓝底白字视图（ViewC over ViewB）的阴影出现。我希望黄色视图 (ViewA) 在白色视图上投下阴影。

我希望白色视图看起来好像位于顶视图（黄色）和底视图（蓝色）之下。

我不确定如何组织视图，以便顶视图也会在中间视图上投下阴影。

我将如何做到这一点？

【问题讨论】：

标签： swiftui shadow

【解决方案1】：

您可以将 zindex 修饰符应用于 ViewA。例如 .zIndex(.infinity)。它将 ViewA 置于一切之上。 https://developer.apple.com/documentation/swiftui/view/zindex(_:)

【讨论】：

这很好用，不需要弄乱 ViewB 上的 y 偏移。这意味着我可以取消添加 ZStack 和移动 ViewB...

【解决方案2】：

如果您将视图放置在 ZStack 中，ViewB 位于 ViewA 和 ViewC 后面，您将看到阴影：

GeometryReader { geo in
    ZStack {
        ViewB()
        VStack(spacing: 0) {
            ViewA()
                .frame(
                    width: geo.size.width,
                    height: geo.size.width/4,
                    alignment: .center)
                .shadow(
                    color: .black,
                    radius: 10,
                    x: 0, y: 0)
            Spacer()
            ViewC()
                .frame(
                    width: geo.size.width,
                    height: 100,
                    alignment: .center)
                .shadow(
                    color: .black,
                    radius: 10,
                    x: 0, y: 0)
                .opacity(0.8)
        }
    }
}

【讨论】：

有道理。但是，ViewB 的大小现在是全高，不再堆叠在 A 和 C 之间。我需要将 B 堆叠在 A 和 C 之间。
我对 B 应用了一个 y 偏移来匹配 ViewA 的高度。在应用您的答案后正确定位 ViewB。