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.
İlk Yorumu Siz Yapın