ScrollView嵌套LazyVStack时，可变高度内容无法滚动到底部

问题描述 #

使用ScrollView包裹LazyVStack展示可变高度内容，通过ScrollViewReader实现点击按钮滚动至底部，但点击后内容无法每次都滚动到底部，偶尔停在底部上方；在复杂动态高度布局中，该问题几乎每次都会出现。

测试环境：Xcode 14.3，iOS 16.4/16.5（真机、模拟器均已测试）

示例代码：

struct RowModel: Identifiable {
    let id: UUID
    let title: String
    let subtitle: String
}
struct ContentView: View {
    @State var models = (1...300).map{ _ in
        let title = String.init(repeating: "#", count: Int.random(in: 100...1000))
        let subtitle = String.init(repeating: "-", count: Int.random(in: 100...500))

        return RowModel(id: .init(), title: title, subtitle: subtitle)
    }

    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                LazyVStack {
                    ForEach(models, id: \.id) { model in
                        row(forModel: model)
                            .padding(.bottom)
                            .id(model.id)
                    }
                }
            }
            .overlay(alignment: .top) {
                Button("Scroll to bottom") {
                    withAnimation {
                        proxy.scrollTo(models.last?.id ?? .init(), anchor: .bottom)
                    }
                }
                .background { Color.yellow }
            }
        }
    }

    func row(forModel model: RowModel) -> some View {
        VStack {
            Text(model.title)
            Text(model.subtitle)
        }
        .background(Color(uiColor: .random()))
    }
}

extension CGFloat {
      
    static func random() -> CGFloat {
        CGFloat(arc4random()) / CGFloat(UInt32.max)
    }
}

extension UIColor {
    static func random() -> UIColor {
        UIColor(red: .random(), green: .random(), blue:  .random(), alpha: 1.0)
    }
}

问题演示：

修复方案 #

问题核心是LazyVStack的延迟加载特性：调用scrollTo时，底部行可能未完成渲染，SwiftUI无法获取其准确布局高度，导致滚动位置计算偏差。以下是几种可靠修复方式：

方式一：延迟执行滚动操作 #

通过DispatchQueue.main.async延迟滚动，给SwiftUI足够时间完成底部内容的布局计算：

Button("Scroll to bottom") {
    withAnimation {
        DispatchQueue.main.async {
            proxy.scrollTo(models.last?.id ?? .init(), anchor: .bottom)
        }
    }
}

方式二：添加固定底部锚点 #

在LazyVStack末尾添加一个固定高度的锚点视图，确保滚动目标始终存在且布局高度已知：

LazyVStack {
    ForEach(models, id: \.id) { model in
        row(forModel: model)
            .padding(.bottom)
            .id(model.id)
    }
    // 底部锚点视图
    Color.clear
        .frame(height: 1)
        .id("bottom-anchor")
}

修改滚动逻辑，指向该锚点：

Button("Scroll to bottom") {
    withAnimation {
        proxy.scrollTo("bottom-anchor", anchor: .bottom)
    }
}

方式三：替换为非延迟加载容器（小数据量场景） #

如果列表数据量较小，直接用VStack替代LazyVStack，避免延迟加载带来的布局问题：

ScrollView {
    VStack {
        ForEach(models, id: \.id) { model in
            row(forModel: model)
                .padding(.bottom)
                .id(model.id)
        }
    }
}

方案说明 #

• 方式一和方式二适用于大数据量场景，其中方式二稳定性更高，锚点视图的布局高度固定，不受动态内容加载影响。
• 方式三仅适合数据量小的情况，否则会影响页面渲染性能。

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