SwiftUI中ZStack底部Image被List遮挡及滚动隐藏需求

问题原因 #

SwiftUI的List默认带有不透明的系统滚动内容背景，会完全覆盖ZStack下层的视图，导致放置在List下方的Image无法显示。

解决方案步骤 #

1. 让Image正常显示 #

给List添加以下修饰符，移除默认背景并设置为透明：

• .scrollContentBackground(.hidden)：iOS 16+ 用于隐藏List的系统滚动内容背景
• .background(Color.clear)：将List背景设为透明，让下层的Image可见

2. 监听滚动并控制Image显示/隐藏 #

通过监听List的滚动偏移量，判断是否滚动到顶部，进而控制Image的显示状态。这里使用自定义的ScrollOffsetReader获取滚动偏移，再根据偏移量调整Image的透明度。

完整代码示例 #

import SwiftUI

// 监听UIScrollView滚动偏移的自定义View
struct ScrollOffsetReader: UIViewRepresentable {
    var onChange: (CGPoint) -> Void
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.backgroundColor = .clear
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        DispatchQueue.main.async {
            // 获取List对应的底层UIScrollView
            if let scrollView = uiView.superview?.superview as? UIScrollView {
                onChange(scrollView.contentOffset)
            }
        }
    }
}

struct ContentView: View {
    // 存储滚动偏移的Y值
    @State private var scrollOffsetY: CGFloat = 0
    
    var body: some View {
        VStack{
            ZStack(alignment: .bottom) {
                // 固定在底部的Image
                Image(systemName:"folder")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 70, height: 70)
                    // 滚动到顶部（偏移量为0）时隐藏，向下滚动时显示
                    .opacity(scrollOffsetY > 0 ? 1 : 0)
                    .animation(.easeInOut(duration: 0.2), value: scrollOffsetY)
                
                List {
                    ForEach(1...8, id: \.self){ i in
                        Text("ROW \(i)")
                            .background(ScrollOffsetReader { offset in
                                scrollOffsetY = offset.y
                            })
                    }
                }
                // 隐藏List默认背景
                .scrollContentBackground(.hidden)
                // 设置List背景透明
                .background(Color.clear)
            }
        }
    }
}

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

代码说明 #

• ScrollOffsetReader：通过UIViewRepresentable获取List底层的UIScrollView，实时传递滚动偏移量。
• ZStack(alignment: .bottom)：将Image固定在ZStack底部，也就是屏幕底部。
• 透明度控制：当List滚动到顶部（scrollOffsetY为0）时，Image完全透明隐藏；当List向下滚动（偏移量大于0）时，Image恢复显示，配合动画让过渡更自然。

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