SwiftUI ScrollViewReader scrollTo行为不一致问题解决问询

问题描述 #

在Xcode和Playgrounds中测试发现一致异常：以下代码预期每次点击按钮时，ScrollView自动滚动到文本底部，但scrollTo的表现会随固定文本长度变化而不同。目标是注释掉Option1、Option2、Option3，仅保留Option4，实现每次点击按钮时屏幕自动显示字符串末尾，但当前无法实现：

• 启用Option2+Option4时，ScrollView可正常滚动到底部
• 仅启用Option3+Option4（仅比Option2少一个换行符\n）时，点击按钮无法滚动到列表最后一项

import SwiftUI

struct ContentView: View {
    @State var textFruit = ""
    var stringArray = ["Apples\n\n", "Pears\n\n", "Strawberries\n\n", "Kiwi\n\n", "Blueberries\n\n"]
    
    var body: some View {
        VStack {
            ScrollViewReader { value in
                ScrollView{
                    //Option 1
                    //Text("Top\n\nThis\n\nIs\n\nA\n\nHorizontally\n\nVery\n\nLong\n\nString\n\nThat\n\nGoes\n\nFrom\n\nThe\n\nTop\n\nOf\n\nThe\n\nScreen\n\nTo\n\nThe\n\nBottom\n\nOf\n\nThe\n\nScreen\n\nBottom")
                    //Option 2
                   // Text("Top\n\nThis\n\nIs\n\nA\n\nHorizontally\n\nVery\n\nLong\n\nString\n\nThat\n\nGoes\n\nFrom\n\nThe\n\nTop\n\nOf\n\n")
                    //Option 3
                    Text("Top\n\nThis\n\nIs\n\nA\n\nHorizontally\n\nVery\n\nLong\n\nString\n\nThat\n\nGoes\n\nFrom\n\nThe\n\nTop\n\nOf\n")
                    //Option 4
                    Text(textFruit)
                    Spacer(minLength: 60)
                        .id("bottom")
                        .onChange(of: textFruit){_ in   value.scrollTo("bottom")
                        }
                }
            }
            
            Button(action: {
                textFruit += stringArray.randomElement() ?? ""
            }, label: {
                Text("Add Word")
            })
            
            Spacer()
        }
    }
}

解决方案 #

问题核心：onChange触发滚动时，ScrollView的布局尚未完成更新，导致scrollTo无法定位到正确位置；同时当内容未超出屏幕时，Spacer(minLength:60)的实际高度不符合预期，进一步干扰滚动定位。

修改后的代码（仅保留Option4）：

import SwiftUI

struct ContentView: View {
    @State var textFruit = ""
    var stringArray = ["Apples\n\n", "Pears\n\n", "Strawberries\n\n", "Kiwi\n\n", "Blueberries\n\n"]
    
    var body: some View {
        VStack {
            ScrollViewReader { proxy in
                ScrollView{
                    // 仅保留Option4，注释其他选项
                    Text(textFruit)
                        .id("fruitBottom") // 给动态文本绑定唯一ID
                    Spacer(minLength: 60)
                }
                
                Button(action: {
                    textFruit += stringArray.randomElement() ?? ""
                    // 延迟执行滚动，等待布局更新完成
                    DispatchQueue.main.async {
                        withAnimation {
                            // 滚动到文本底部，确保内容末尾可见
                            proxy.scrollTo("fruitBottom", anchor: .bottom)
                        }
                    }
                }, label: {
                    Text("Add Word")
                })
                .padding()
            }
            
            Spacer()
        }
    }
}

关键修改点 #

1. 将Button移入ScrollViewReader闭包内，确保能直接访问滚动代理proxy
2. 给动态文本Text(textFruit)绑定id，直接以文本视图为滚动目标，替代原Spacer的id
3. 在按钮点击后用DispatchQueue.main.async延迟滚动，等待SwiftUI完成布局更新
4. 使用anchor: .bottom参数，确保滚动后文本底部对齐ScrollView可视区域底部

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