SwiftUI中ScrollView无法滚动至底部的问题求助

问题描述 #

• ScrollView无法滚动到视图底部，用户触达底部时会立刻回滚到初始高度657
• 画布基于捕获坐标绘制，内容高度无法被ScrollView正确识别
• 尝试通过PreferenceKey获取vStackGeometryReader.size.height来设置主视图高度，但未生效

问题分析 #

嵌套ScrollView的尺寸计算存在冲突，直接在布局过程中读取GeometryReader尺寸会因为视图未完全渲染拿到初始值，导致ScrollView无法识别真实的可滚动区域高度。

解决方案 #

通过PreferenceKey在视图布局完成后捕获内层内容的实际高度，再传递给ScrollView设置正确的frame：

1. 定义用于传递高度的PreferenceKey

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

2. 修改主视图代码，修复滚动布局

@State private var contentHeight: CGFloat = 0

var body: some View {
    VStack {
        Text("…")
        GeometryReader { mainGeometryReader in
            ScrollView(.horizontal, showsIndicators: true) {
                ScrollViewReader { horizontalScrollViewReader in
                    VStack {
                        // 头部画布
                        Canvas { headerCanvasContext, headerCanvasSize in
                            // 你的头部绘制逻辑
                        }
                        .frame(width: mainGeometryReader.size.width, height: CanvasConstant.value)
                        
                        // 垂直滚动的内容区域
                        ScrollView {
                            Canvas { bodyCanvasContext, bodyCanvasSize in
                                // 你的内容绘制逻辑
                            }
                            .frame(width: mainGeometryReader.size.width)
                            .background(
                                // 捕获内容实际高度
                                GeometryReader { geo in
                                    Color.clear
                                        .preference(key: ContentHeightKey.self, value: geo.size.height)
                                }
                            )
                        }
                        .frame(height: contentHeight)
                    }
                    .frame(width: mainGeometryReader.size.width)
                    // 接收传递的高度值
                    .onPreferenceChange(ContentHeightKey.self) { newHeight in
                        contentHeight = newHeight
                    }
                }
            }
        }
    }
}

修改说明 #

• 移除多余的内层GeometryReader，避免嵌套布局导致的约束混乱
• 通过PreferenceKey在视图渲染完成后获取内容实际高度，解决初始值不准确的问题
• 给垂直ScrollView设置明确的高度，让外层水平ScrollView能正确识别可滚动范围
• 统一使用外层mainGeometryReader的宽度，保证布局一致性

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