SwiftUI双ScrollView交互问题：底部滚动视图无法覆盖顶部视图

问题背景 #

• 需求：两个ScrollView上下布局，底部纵向ScrollView上滑时可覆盖顶部横向ScrollView
• 当前问题：底部ScrollView通过固定offset(y: 700)置于屏幕底部，滑动时无法覆盖上方的蓝色矩形区域
• 期望效果：类似Telegram打开带图片帖子的交互，底部ScrollView上滑过程中完全覆盖顶部内容

修改后的完整代码 #

import SwiftUI

struct ScrollOffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct ScrollmainView: View {
    // 记录底部ScrollView的滚动偏移量
    @State private var scrollOffset: CGFloat = 0
    // 顶部横向ScrollView的固定高度
    private let topScrollViewHeight: CGFloat = 400
    // 底部ScrollView初始偏移量（默认置于屏幕底部）
    private var initialBottomOffset: CGFloat {
        UIScreen.main.bounds.height - topScrollViewHeight - 76 // 76为EntryScrollHeader的高度
    }

    var body: some View {
        ZStack(alignment: .top) {
            // 顶部横向ScrollView（ZStack下层，会被上层View覆盖）
            ScrollView(.horizontal) {
                LazyHStack {
                    Rectangle()
                        .foregroundColor(.cyan)
                        .frame(width: UIScreen.main.bounds.width - 32, height: topScrollViewHeight)
                }
                .padding(.horizontal, 16)
            }
            .background(Color.red)

            // 底部纵向ScrollView（ZStack上层，可覆盖顶部内容）
            ScrollView {
                LazyVStack(spacing: 0) {
                    EntryScrollHeader()
                    Color.green.opacity(0.5)
                        .frame(height: 600)
                        .background(Color.white)
                    // 填充底部安全区域
                    Color.clear
                        .frame(height: UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0)
                }
                // 监听滚动偏移
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .preference(
                                key: ScrollOffsetPreferenceKey.self,
                                value: proxy.frame(in: .named("bottomScroll")).minY
                            )
                    }
                )
            }
            .coordinateSpace(name: "bottomScroll")
            // 动态调整位置：上滑时逐步上移，直到完全覆盖顶部
            .offset(y: max(initialBottomOffset - scrollOffset, 0))
            .onPreferenceChange(ScrollOffsetPreferenceKey.self) { newValue in
                scrollOffset = newValue
            }
        }
        .ignoresSafeArea(.all, edges: [.top, .bottom])
    }
}

struct EntryScrollHeader: View {
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                VStack(alignment: .leading) {
                    Text("Description")
                        .font(.headline)
                }
                Spacer()

                Button {
                    // 书签按钮逻辑
                } label: {
                    Image(systemName: "bookmark")
                        .foregroundColor(.black.opacity(0.25))
                        .font(.system(size: 25, weight: .regular))
                }
            }
            .padding(.bottom, 4)

            HStack {
                VStack(alignment: .leading) {
                    Text("Lorem")
                        .font(.title)
                    Text("Ipsum")
                        .font(.subheadline)
                        .foregroundColor(.gray)
                }
                Spacer()
            }
        }
        .frame(height: 76)
        .padding([.leading, .trailing], 15)
        .padding(.top, 12)
        .background(Color.white)
        .shadow(color: .black.opacity(0.1), radius: 2, x: 0, y: 1)
    }
}

// 预览
struct ScrollmainView_Previews: PreviewProvider {
    static var previews: some View {
        ScrollmainView()
    }
}

关键修改说明 #

• ZStack层级调整：将顶部横向ScrollView放在ZStack下层，底部纵向ScrollView放在上层，确保底部View具备覆盖顶部内容的层级优先级
• 动态偏移计算：取消固定偏移量，改为根据滚动偏移动态调整位置，初始状态下底部View停在屏幕底部，上滑时逐步上移直至完全覆盖顶部
• 滚动监听优化：给底部ScrollView设置专属坐标空间，确保偏移量计算准确；用背景中的GeometryReader监听滚动，避免干扰主布局
• UI细节优化：给头部添加阴影增强层级感，调整文本对齐方式提升视觉体验

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