SwiftUI中List双层阴影失效：自定义ViewModifier仅生效一层的原因及解决

问题原因 #

你遇到的差异源于视图层级的不同：

• 直接给List添加双层阴影时，两个阴影都是作用于List自身的容器边界，没有额外图层干扰，因此能正常叠加渲染。
• 而在CustomListStyle中，你将.shadow修饰符应用于包含List和全屏背景的组合视图上。由于List是滚动容器，且背景设置了.ignoresSafeArea()，第一个阴影会把组合视图渲染为扁平图层，第二个阴影无法正确叠加到这个图层上，最终仅第一个阴影生效。

解决方案 #

调整CustomListStyle的视图结构，将双层阴影应用到独立的背景图层上，通过ZStack分层处理List与背景，确保阴影正常叠加：

struct CustomListStyle: ViewModifier {
    var backgroundColor: Color
    var foregroundColor: Color
    var shadowColor: Color
    var shadowOffsetY: CGFloat

    func body(content: Content) -> some View {
        ZStack {
            // 背景层承载双层阴影
            backgroundColor
                .ignoresSafeArea()
                .shadow(color: shadowColor, radius: 0, x: 0, y: shadowOffsetY)
                .shadow(color: StyleManager.Colors.blackShadow, radius: 4, x: 0, y: 3)
            
            // List内容保留原有修饰
            content
                .foregroundColor(foregroundColor)
                .scrollContentBackground(.hidden)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .font(StyleManager.Fonts.listTitle)
        }
    }
}

如果希望阴影跟随List容器形状而非全屏范围，可以改用容器视图承载阴影：

struct CustomListStyle: ViewModifier {
    var backgroundColor: Color
    var foregroundColor: Color
    var shadowColor: Color
    var shadowOffsetY: CGFloat

    func body(content: Content) -> some View {
        content
            .foregroundColor(foregroundColor)
            .scrollContentBackground(.hidden)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background {
                RoundedRectangle(cornerRadius: 8) // 可根据需求调整圆角
                    .fill(backgroundColor)
                    .ignoresSafeArea()
                    .shadow(color: shadowColor, radius: 0, x: 0, y: shadowOffsetY)
                    .shadow(color: StyleManager.Colors.blackShadow, radius: 4, x: 0, y: 3)
            }
            .font(StyleManager.Fonts.listTitle)
    }
}

内容的提问来源于stack exchange，提问作者Larry