SwiftUI ScrollView滚动时绿色矩形缩放失效且无法滚动问题求助

当前代码无法滚动的核心原因是布局循环+滚动内容高度不足：绿色矩形的高度绑定了scrollOffset，而scrollOffset又依赖VStack在全局坐标系的minY，滚动时这个值变化会立刻改变矩形高度，导致ScrollView无法正确计算可滚动区域；同时初始状态下内容高度太低，没有滚动空间。

具体修正方案 #

1. 兼容iOS16及以下版本 #

修正PreferenceKey逻辑，添加滚动占位视图，通过坐标空间计算真实滚动偏移：

struct TestView: View {
    @State private var scrollOffset = 0.0
    
    struct ScrollOffsetPreferenceKey: PreferenceKey {
        static var defaultValue: CGFloat = .zero
        
        static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
            value = nextValue() // 直接赋值，无需累加
        }
    }
    
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                Rectangle()
                    .foregroundStyle(.green)
                    .frame(width: 200, height: max(scrollOffset, 0))
                
                Text("Offset: \(scrollOffset)")
                
                // 添加高占位视图，确保ScrollView有滚动空间
                Color.clear.frame(height: 1000)
            }
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .preference(
                            key: ScrollOffsetPreferenceKey.self,
                            // 计算内容相对于ScrollView的真实偏移
                            value: -proxy.frame(in: .named("scrollView")).minY
                        )
                }
            )
            .onPreferenceChange(ScrollOffsetPreferenceKey.self) { newValue in
                // 限制偏移范围，避免矩形无限放大
                scrollOffset = max(min(newValue, 500), 0)
            }
        }
        .coordinateSpace(name: "scrollView") // 给ScrollView设置专属坐标空间
    }
}

2. iOS17+简化版本 #

利用scrollPosition直接绑定滚动位置，无需PreferenceKey：

struct TestView: View {
    @State private var scrollPosition: CGFloat = 0.0
    
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                Rectangle()
                    .foregroundStyle(.green)
                    .frame(width: 200, height: max(scrollPosition, 0))
                
                Text("Offset: \(scrollPosition)")
                
                Color.clear.frame(height: 1000)
            }
            .scrollTargetLayout()
        }
        .scrollPosition(id: $scrollPosition) // 直接获取滚动位移
    }
}

关键修改说明 #

• 移除PreferenceKey的累加逻辑：仅需单个GeometryReader的计算结果，累加会导致偏移量错误。
• 添加滚动占位视图：确保ScrollView有足够的可滚动区域，触发滚动操作。
• 计算真实滚动偏移：通过ScrollView的专属坐标空间，避免矩形高度变化影响偏移量计算。
• 限制偏移范围：防止矩形无限放大超出屏幕，提升交互体验。

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