SwiftUI中带阴影的View与List共存时阴影不显示的问题求助

问题说明 #

你当前实现了一个带阴影的按钮栏，紧跟在List组件上方，设置了VStack的spacing: 0以避免滚动时出现间隙，但按钮栏的阴影在List旁边无法显示，换成ScrollView时阴影正常可见。

问题原因 #

SwiftUI的List组件即使使用PlainListStyle，默认仍会渲染不透明的背景，且其渲染层级会覆盖上方视图的阴影，导致阴影被遮挡无法显示。

解决方案 #

方案1：调整List的渲染层级与背景透明度

通过给List设置zIndex(-1)让它在按钮栏下方渲染，同时设置背景透明，确保阴影可以透过List显示：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Button {
                } label: {
                    Text("Button 1")
                }
                .frame(maxWidth: .infinity)
                
                Divider()
                    .frame(height: 44)
                
                Button {
                } label: {
                    Text("Button 2")
                }
                .frame(maxWidth: .infinity)
            }
            .background(Color.white
                .shadow(color: Color.gray, radius: 10, x: 0, y: 0)
                .mask(Rectangle().padding(.bottom, -20))
            )

            List(0..<10) { index in
                Text("Scrollable list")
            }
            .listStyle(PlainListStyle())
            .background(Color.clear)
            .zIndex(-1)
        }
    }
}

方案2：直接给按钮栏添加阴影并抵消间距

将阴影直接应用到按钮栏本身，而非背景层，通过负padding抵消阴影带来的额外间距，保持VStack无间隙：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Button {
                } label: {
                    Text("Button 1")
                }
                .frame(maxWidth: .infinity)
                
                Divider()
                    .frame(height: 44)
                
                Button {
                } label: {
                    Text("Button 2")
                }
                .frame(maxWidth: .infinity)
            }
            .background(Color.white)
            .shadow(color: Color.gray, radius: 10, x: 0, y: 5)
            .padding(.bottom, -5)

            List(0..<10) { index in
                Text("Scrollable list")
            }
            .listStyle(PlainListStyle())
        }
    }
}

说明 #

• 方案1保留了你原有的阴影mask设置，适合需要特定阴影形状的场景；
• 方案2更简洁，调整阴影的y值让阴影向下延伸，同时通过负padding保证VStack无间隙。

内容的提问来源于stack exchange，提问作者Vikash Kumar Chaubey