SwiftUI ile Auto Scroll işlemi

Merhabalar bu yazımda SwiftUI ile birlikte ScrollView kullanırken otomatik bir şekilde aşağı doğru scroll aksiyonunu nasıl gerçekleştirebileceğinizi göstereceğim.

iOS ile uygulama geliştirirken ScrollView kullandığımız değerli elementlerden. SwiftUI ile basit bir chat uygulaması yazdığınızı düşünelim. Burada vereceğim örnekte mesaj gönderdikten sonra otomatik olarak aşağı kayan bir scroll yapımı olacak.

Aşağıda paylaştığım örneği inceleyebilirsiniz.

struct Message: Equatable {
    var id: String = UUID().uuidString
    var text: String
}

struct ContentView: View {
    
    @State private var msgText: String = ""
    @State private var messages: [Message] = []
    
    var body: some View {
        VStack(alignment: .leading) {
            ScrollView {
                ScrollViewReader { scrollView in
                    VStack {
                        ForEach(messages, id: \.id) { row in
                            HStack {
                                Text(row.text)
                                    .font(.body)
                                    .foregroundColor(.white)
                                    .padding()
                                    .background(Color.blue)
                                    .cornerRadius(5)
                                    .padding(.leading, 16)
                                Spacer()
                            }.id(row.id)
                        }
                    }.onChange(of: messages, perform: { value in
                        DispatchQueue.main.async {
                            withAnimation {
                                scrollView.scrollTo(messages[messages.endIndex - 1].id, anchor: .bottom)
                            }
                        }
                    })
                }
            }
            
            Spacer()
            
            HStack {
                TextField("Message", text: $msgText)
                    .padding()
                    .background(Color.gray.opacity(0.1))
                    .clipShape(RoundedRectangle(cornerRadius: 10))
                Button(action: {
                    let newMessage = Message(text: msgText)
                    messages.append(newMessage)
                    self.msgText = ""
                }, label: {
                    Image(systemName: "paperplane.fill")
                        .foregroundColor(.black)
                })
            }.padding()
        }
    }
}

onChange aksiyonu ile tetiklenen son mesaja doğru scroll işlemi gerçekleştirebiliriz. Scroll ile ilgili anlık verileri ScrollViewReader bloğu içerisinden elde edebilirsiniz.