LazyVStack with ScrollView's new features doesn't show content

Question

Created Nov ’23

Replies 4

Boosts 1

Views 1.3k

Participants 3

Hi there, i'm currently trying to make a ChatView with SwiftUI. I've been using "inverted" ScrollView, but now I see new defaultScrollAnchor and scrollPosition methods which can make solution more kind of native and less buggy.

So, here is the snippet of my implementation:

                ScrollView {
                    LazyVStack {
                        ForEach(messages) { message in
                            MessageView(
                                message: message,
                                actions: viewModel.messageActions
                            )
                        }
                    }
                }
                .defaultScrollAnchor(.bottom)

At this point it works as expected most of the time. But once I have a message which content doesn't fit on the screen there is the problem.

When I enter the chat for the first time all is OK:

But next times I open the chat i see only this: Снимок экрана 2023-11-12 в 17.36.22.png

But the content is scrollable, once i scroll a little bit to the top, messages appear like they just were scrolled.

I think this is the problem with LazyVStack, maybe it waits for the content top to be displayed to render item?

Here is the full code of my ChatView:

import Foundation
import SwiftUI
import SwiftData
import AlertKit
import Factory

struct ChatView: View {
    @StateObject private var viewModel: ChatViewModel
    
    @Environment(\.modelContext) private var modelContext
    
    @Query private var messages: [ChatMessage]
    @Query private var generatingMessages: [ChatMessage]
        
    init(chat: Chat) {
        _viewModel = StateObject(wrappedValue: Container.shared.chatViewModel(chat))
        
        let chatId = chat.persistentModelID
        _messages = Query(
            filter: #Predicate {
                $0.chat?.persistentModelID == chatId
            }, 
            sort: \.date,
            animation: .spring
        )
        _generatingMessages = Query(
            filter: #Predicate { 
                $0.generating && $0.chat?.persistentModelID == chatId
            }
        )
    }
        
    var body: some View {
        VStack(spacing: 0) {
            ScrollView {
                LazyVStack(spacing: 0) {
                    ForEach(messages) { message in
                        MessageView(
                            message: message,
                            actions: viewModel.messageActions
                        )
                    }
                }
            }
            .defaultScrollAnchor(.bottom)
            
            if !messages.isEmpty { Divider() }
            
            HStack(alignment: .bottom) {
                TextField("message", text: $viewModel.text, axis: .vertical)
                    .padding(.vertical, 7)
                    .padding(.horizontal, 12)
                    .background(Color(.secondarySystemBackground))
                    .clipShape(RoundedRectangle(cornerRadius: 20))
                    .onSubmit {
                        sendMessage()
                    }
                
                SendButton(enabled: generatingMessages.isEmpty) {
                    sendMessage()
                }
                .animation(.default, value: generatingMessages.count)
                .padding(.vertical, 7)
            }
            .padding(.horizontal)
            .padding(.vertical, 10)
        }
        .toastingErrors(with: viewModel)
        .scrollDismissesKeyboard(.interactively)
        .navigationTitle(viewModel.chat.title ?? "")
        .navigationBarTitleDisplayMode(.inline)
    }
    
    private func sendMessage() {
        if viewModel.text.isEmpty {
            return
        }
        
        viewModel.startLoading()
    }
}

So, is there any workaround for this issue? Or maybe I do something wrong?

Boost

Answer 1

F0x1d OP

Nov ’23

It works fine with usual VStack

1

Answer 2

gokhanakcay OP

Mar ’24

I'm using scrollTo and I have the same problem. VStack works fine and LazyVStack is buggy. Have you found a solution for it?

1

Answer 3

mphair OP

Oct ’24

I'm having the same problem. If I use a VStack it works, but then I have some performance issues loading into the list (because of how many items there are). Using a LazyVStack with the ScrollView and the defaultScrollAnchor with a lot of data leaves a blank window until I scroll up.

0

Answer 4

mphair OP

Oct ’24

FWIW, this code seems to work for me as a work around for the defaultScrollAnchor

struct MyView : View {
    @State private var scrollPosition = ScrollPosition()
    var body: some View {
        ScrollView {
            LazyVStack {
                // lots of data
            }
        }
        .scrollPosition($scrollPosition, anchor: .bottom)
        .onAppear {
            scrollPosition.scrollTo(edge: .bottom)
        }
    }
}

0