SwiftUI ScrollView('s scrollIndicator) moves unwanted

Question

import Foundation
import SwiftUI

struct TestChatUIView: View {
    @State var models: [TestChatModel2] = []
    
    init() {

    }
    var body: some View {
        ZStack(alignment: .top) {
            ScrollViewReader { scrollViewProxy in
                ScrollView {
                    LazyVStack(spacing: 0) {
                        ForEach(models.indices, id: \.self) { index in
                            VStack {
                                let message = models[index]
                                Text("\(message.id)")
                                    .id(message.id)
                                    .flipped()
                                    .frame(minHeight: 40)
                                    .onAppear {
                                        if index < (3) {
                                            
                                            for i in 0...20 {
                                                let newModel = TestChatModel2(id: "id \(models.count + 1)", date: Date())
                                                models.insert(newModel, at: 0)
                                            }
                                        }
                                    }
                            }
                        }
                        
                    }
                }
                .flipped()
                    
            }
            
            VStack {
                Spacer()
                Button {
                    for int in 0...30 {
                        models.insert(.init(id: "id \(models.count + 1)", date: Date()), at: 0)
                    }
                } label: {
                    Text("loadMore")
                        .background(Color.red)
                }

            }
        }
    }
}

struct TestChatModel2: Identifiable {
    var id: String = UUID().uuidString
    var date: Date
}
extension View {
    
    func flipped() -> some View {
        self.rotationEffect(.radians(Double.pi))
            .scaleEffect(x: -1, y: 1, anchor: .center)
    }
}

I am making chatting system, this code is kinda very sample of it. What I want to is load more messages when it gets close to bottom. But problem is scroll focus keeps locating bottom so it cause recursive loadmore function.

How to fix?

I changed .flipped() modifier's location like on VStack, ForEach, but it never works.

Do these posts address your question? stackoverflow.com/questions/75648488/… and stackoverflow.com/questions/76068079/… — workingdog support Ukraine
– workingdog support Ukraine, Commented Dec 13, 2023 at 7:17
@workingdogsupportUkraine thanks for comment. sadly it is not my problem which scroll automatcally moves. i found way developer.apple.com/forums/thread/731271 but sadly my app target is iOS15 so i am still figuring out — Yongjun Lee
– Yongjun Lee, Commented Dec 13, 2023 at 8:14

Yongjun Lee · Accepted Answer · 2023-12-15 01:40:53Z

I debugged a lot and just figure out that is not feasible. Even i made a same logic using UIKit (ScrollView+StackView and TableView, CollectionView), all the same issue happened(when some items are added on top, scroll moved to still top)

Also some chat app such as sendbird also could not resolve this error

import Foundation
import SwiftUI

struct TestChatUIView: View {
    @State var models: [TestChatModel2] = []
    @State var modelId: String?
    
    var body: some View {
        ZStack(alignment: .top) {
            ScrollViewReader { scrollViewProxy in
                ScrollView {
                    LazyVStack(spacing: 0) {
                        ForEach(models, id: \.id) { message in
                            Text("\(message.id)")
                                .flipped()
                                .frame(minHeight: 40)
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollPosition(id: $modelId)
                .flipped()
                VStack {
                    
                    HStack {
                        Button("Prepend") {
                            loadPrev()
                            
                        }
                        Button("Movee") {
                            scrollViewProxy.scrollTo("id 31", anchor: .center)
                        }
                        Button("Append") {
                            loadMore()
                        }
                    }
                    
                }
                
            }
            .onAppear(perform: {
                for int in 0...30 {
                    models.insert(.init(id: "id \(models.count + 1)", date: Date()), at: 0)
                }
            })
        }
    }
    
    func loadMore() {
        for i in 0...20 {
            let newModel = TestChatModel2(id: "id \(models.count + 1)", date: Date())
            models.insert(newModel, at: 0)
        }
    }
    
    func loadPrev() {
        for i in 0...20 {
            let newModel = TestChatModel2(id: "- id \(models.count + 1)", date: Date())
            models.append(newModel)
        }
    }
}

struct TestChatModel2: Identifiable, Equatable {
    var id: String = UUID().uuidString
    var date: Date
}

extension View {
    
    func flipped() -> some View {
        self.rotationEffect(.radians(Double.pi))
            .scaleEffect(x: -1, y: 1, anchor: .center)
    }
}

However above the codes, i added.

.scrollTargetLayout() .scrollPosition(id: $modelId)

it works for me (Sadly my app target is iOS15). and those func available after iOS17

Collectives™ on Stack Overflow

SwiftUI ScrollView('s scrollIndicator) moves unwanted

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related