SwiftUI ScrollView无法滚动至ZStack全部内容的技术问题

问题原因 #

核心问题出在ZStack的尺寸计算逻辑：ZStack默认会根据内部最顶层（未偏移）的视图确定自身大小，你用offset把矩形向下偏移后，这些偏移出去的内容并没有被计入ZStack的总高度。ScrollView只能识别到ZStack的原始高度，自然无法滚动到超出这个范围的内容。

解决方案1：固定ZStack高度（适合静态内容） #

如果内容数量和偏移量是固定的，直接计算出容纳所有内容的总高度，给ZStack设置明确的frame即可：

struct TestView: View {
    var colors: [Color] = [.red, .orange, .yellow, .green, .mint, .teal, .cyan, .blue, .indigo, .purple, .pink, .brown ]

    var body: some View {
        ScrollView {
            ZStack {
                ForEach(0..<10) {i in
                    RoundedRectangle(cornerSize: CGSize(width: 30, height: 30))
                        .fill(colors[i])
                        .frame(width: 300, height: 300 )
                        .offset(x: 0, y: CGFloat(i) * 200)
                }
            }
            // 总高度=最后一个矩形的偏移量(9*200)+自身高度(300)
            .frame(height: CGFloat(9)*200 + 300)
        }
    }
}

解决方案2：动态计算高度（适合动态内容） #

如果内容数量或偏移量是动态变化的，用PreferenceKey和GeometryReader自动计算所有内容的总范围：

首先定义传递视图范围的PreferenceKey：

struct ContentBoundsPreferenceKey: PreferenceKey {
    static var defaultValue: CGRect = .zero
    
    static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
        // 合并所有视图的frame，得到包含全部内容的最小矩形
        value = value.union(nextValue())
    }
}

然后修改视图代码：

struct TestView: View {
    var colors: [Color] = [.red, .orange, .yellow, .green, .mint, .teal, .cyan, .blue, .indigo, .purple, .pink, .brown ]
    @State private var totalContentHeight: CGFloat = 0

    var body: some View {
        ScrollView {
            ZStack {
                ForEach(0..<10) {i in
                    RoundedRectangle(cornerSize: CGSize(width: 30, height: 30))
                        .fill(colors[i])
                        .frame(width: 300, height: 300 )
                        .offset(x: 0, y: CGFloat(i) * 200)
                        .background(
                            GeometryReader { geo in
                                Color.clear
                                    // 获取当前矩形在ZStack坐标系中的位置
                                    .preference(key: ContentBoundsPreferenceKey.self, value: geo.frame(in: .named("ZStackSpace")))
                            }
                        )
                }
            }
            .coordinateSpace(name: "ZStackSpace")
            // 监听范围变化，更新总高度
            .onPreferenceChange(ContentBoundsPreferenceKey.self) { combinedBounds in
                totalContentHeight = combinedBounds.maxY
            }
            // 将ZStack高度设置为所有内容的最大Y值
            .frame(height: totalContentHeight)
        }
    }
}

这种方法会自动适配内容变化，让ScrollView始终能识别到完整的可滚动区域。

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