SwiftUI中scrollTo在onChange/onAppear无法滚动到底部的问题

问题现象 #

• 调用scrollTo滚动List至最后一项时，若将代码放在onChange或onAppear回调内，最后一行会被部分遮挡，无法完全显示
• 相同的scrollTo代码通过按钮触发时，却能正常滚动到底部
• 无论列表项内VStack的实际高度如何，回调中的scrollTo始终只滚动到标准行高对应的位置，未适配单元格实际高度

问题代码 #

VStack {
    Button("Scroll To ") {
        readerProxy?.scrollTo(careLogItems.last)
    }
    ScrollViewReader { reader in
        List(careLogItems) { i in
            VStack {
                Text(i.logText)
                Text(i.logDate.description)
            }.id(i)
        }.onAppear {
            readerProxy = reader
            //reader.scrollTo(careLogItems.last)
        }
        CareLogItemDetail(careLogItem: $newCareLogItem, addItem: addCareLogItem)
    }
}
.onChange(of: careLogItems) { _ in
    print("changed \(careLogItems.count)")
    readerProxy?.scrollTo(careLogItems.last)
}
.onAppear {
    if (hasAppeared == false) {
        hasAppeared = true
        loadCareLogItems()
    }
}

问题截图 #

• 回调触发scrollTo的效果：
  
• 按钮触发scrollTo的效果：
  

原因分析 #

核心原因是：当careLogItems更新后，SwiftUI还未完成新列表项的布局计算，此时调用scrollTo会使用默认行高计算滚动位置，而非单元格实际高度；而按钮点击是在UI完全渲染完成后触发，能获取到正确的布局信息。

解决方法 #

方法1：异步延迟执行scrollTo #

利用DispatchQueue.main.async让滚动操作在UI更新完成后执行，确保获取最新的单元格布局信息：

.onChange(of: careLogItems) { _ in
    print("changed \(careLogItems.count)")
    DispatchQueue.main.async {
        readerProxy?.scrollTo(careLogItems.last)
    }
}

方法2：使用Task等待视图刷新完成 #

用Task结合await Task.yield()等待当前视图更新周期完成后再执行滚动：

.onChange(of: careLogItems) { _ in
    print("changed \(careLogItems.count)")
    Task { @MainActor in
        await Task.yield()
        readerProxy?.scrollTo(careLogItems.last)
    }
}

方法3：避免全局readerProxy，直接在ScrollViewReader内部处理 #

将onChange回调移到ScrollViewReader内部，使用本地reader实例，减少代理持有带来的潜在问题：

VStack {
    Button("Scroll To ") {
        readerProxy?.scrollTo(careLogItems.last)
    }
    ScrollViewReader { reader in
        List(careLogItems) { i in
            VStack {
                Text(i.logText)
                Text(i.logDate.description)
            }.id(i)
        }
        .onChange(of: careLogItems) { _ in
            print("changed \(careLogItems.count)")
            Task { @MainActor in
                await Task.yield()
                reader.scrollTo(careLogItems.last)
            }
        }
        .onAppear {
            readerProxy = reader
            Task { @MainActor in
                await Task.yield()
                reader.scrollTo(careLogItems.last)
            }
        }
        CareLogItemDetail(careLogItem: $newCareLogItem, addItem: addCareLogItem)
    }
}
.onAppear {
    if !hasAppeared {
        hasAppeared = true
        loadCareLogItems()
    }
}

补充说明 #

若上述方法仍有问题，可给scrollTo添加锚点参数，确保最后一项底部对齐列表底部：

reader.scrollTo(careLogItems.last, anchor: .bottom)

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