SwiftUI ScrollView无法向上滚动问题求助

问题描述 #

我正在实现一个聊天功能，使用SwiftUI和SignalR，代码如下：

struct ContentView: View {
    @State private var channelId = ""
    @State private var message = ""
    
    @ObservedObject var sig = SignalRService(urlStr: "\(API.HubsEndpoint)/hubs/theHub")
    
    var body: some View {
        VStack {
            HStack {
                TextField("Channel ID", text: $channelId)
                    .textFieldStyle(.roundedBorder)
                Button {
                    sig.invoke(method: "JoinRoom", arguments: [channelId]) { error in
                        print("joined")
                        if let err = error {
                            print(err)
                        }
                    }
                } label: {
                    Text("Join")
                }
                .padding(5)
                .background(Color.accentColor)
                .foregroundColor(.white)
                .cornerRadius(2)
            }
            .padding()
            
            Spacer()
            
            ScrollView {
                ScrollViewReader { scrollView in
                    LazyVStack(alignment: .leading, spacing: 5) {
                        ForEach(sig.messages) { msg in
                            HStack(alignment: .top) {
                                Text(msg.user)
                                    .font(.caption)
                                    .bold()
                                Text(msg.message)
                                    .font(.caption)
                            }
                            .id(msg.id)
                            .padding(20)
                            .background(.regularMaterial)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                        }
                    }
                    .onChange(of: sig.messages.last) { newValue in
                        scrollView.scrollTo(newValue?.id)
                    }
                }
                .frame(height: UIScreen.main.bounds.height/4, alignment:.bottom)
            }
            .frame(height: UIScreen.main.bounds.height/4, alignment:.bottom)
            .background(Color.black)
            
            HStack {
                TextField("Message", text: $message)
                    .textFieldStyle(.roundedBorder)
                Button {
                    sig.invoke(method: "SendMessage", arguments: [message, channelId]) { error in
                        print("messaged")
                        if let err = error {
                            print(err)
                        }
                        else {
                            message = ""
                        }
                    }
                } label: {
                    Image(systemName: "paperplane.fill")
                }
                .padding(5)
                .background(Color.accentColor)
                .foregroundColor(.white)
                .cornerRadius(2)
            }
            .padding(.horizontal)
        }
    }
}

实际使用时，尝试向上滚动ScrollView会不断弹回底部，请问是什么原因导致该问题？

问题原因 #

• ScrollViewReader层级错误：你把ScrollViewReader嵌套在了ScrollView内部，这会导致它无法正确关联并控制ScrollView的滚动行为；加上重复设置的frame(height:)，会让ScrollView的内容边界计算出现混乱，直接引发滚动回弹。
• 滚动触发逻辑过度敏感：onChange(of: sig.messages.last)的监听条件太宽泛，只要视图刷新（比如滚动时的界面重绘），哪怕没有新消息添加，也可能因为messages.last的引用变化触发滚动，强制将位置拉回底部。

解决方案 #

1. 调整层级：让ScrollViewReader包裹ScrollView，确保它能正确控制滚动容器。
2. 移除重复的frame设置：避免布局冲突，只在最外层设置ScrollView的高度。
3. 优化滚动触发：改为监听messages数组的数量变化，确保只有新消息添加时才自动滚动到底部。

修改后的代码如下：

struct ContentView: View {
    @State private var channelId = ""
    @State private var message = ""
    
    @ObservedObject var sig = SignalRService(urlStr: "\(API.HubsEndpoint)/hubs/theHub")
    // 记录消息数量，用于判断是否有新消息添加
    @State private var lastMessageCount = 0
    
    var body: some View {
        VStack {
            HStack {
                TextField("Channel ID", text: $channelId)
                    .textFieldStyle(.roundedBorder)
                Button {
                    sig.invoke(method: "JoinRoom", arguments: [channelId]) { error in
                        print("joined")
                        if let err = error {
                            print(err)
                        }
                    }
                } label: {
                    Text("Join")
                }
                .padding(5)
                .background(Color.accentColor)
                .foregroundColor(.white)
                .cornerRadius(2)
            }
            .padding()
            
            Spacer()
            
            // 调整层级：ScrollViewReader包裹ScrollView
            ScrollViewReader { scrollView in
                ScrollView {
                    LazyVStack(alignment: .leading, spacing: 5) {
                        ForEach(sig.messages) { msg in
                            HStack(alignment: .top) {
                                Text(msg.user)
                                    .font(.caption)
                                    .bold()
                                Text(msg.message)
                                    .font(.caption)
                            }
                            .id(msg.id)
                            .padding(20)
                            .background(.regularMaterial)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                        }
                    }
                }
                .frame(height: UIScreen.main.bounds.height/4)
                .background(Color.black)
                .onChange(of: sig.messages.count) { newCount in
                    // 只有当消息数量增加时，才滚动到底部
                    if newCount > lastMessageCount, let lastMsg = sig.messages.last {
                        scrollView.scrollTo(lastMsg.id)
                    }
                    lastMessageCount = newCount
                }
            }
            
            HStack {
                TextField("Message", text: $message)
                    .textFieldStyle(.roundedBorder)
                Button {
                    sig.invoke(method: "SendMessage", arguments: [message, channelId]) { error in
                        print("messaged")
                        if let err = error {
                            print(err)
                        }
                        else {
                            message = ""
                        }
                    }
                } label: {
                    Image(systemName: "paperplane.fill")
                }
                .padding(5)
                .background(Color.accentColor)
                .foregroundColor(.white)
                .cornerRadius(2)
            }
            .padding(.horizontal)
        }
    }
}

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