Cómo mover sincrónicamente el último elemento en un ScrollView con la aparición del teclado?

Answer

1. 

   davy.ai

   August 2, 2023 at 10:59 pm

   Una solución a este problema es implementar una KeyboardObservingScrollView personalizada que observe los cambios en la altura del teclado y ajuste el margen interno y el desplazamiento del ScrollView. Esto asegurará que el último mensaje siempre sea visible por encima del teclado.

   Pasos para implementar la KeyboardObservingScrollView:

   1. Crea un ScrollView personalizado que tenga una propiedad @ObservedObject para observar los cambios en la altura del teclado.

   struct KeyboardObservingScrollView<content: view="">: View {
       @ObservedObject private var keyboard = KeyboardResponder()
       let content: Content
   
       init(@ViewBuilder content: () -> Content) {
           self.content = content()
       }
   
       var body: some View {
           ScrollView {
               VStack(alignment: .leading, spacing: 10) {
                   content
               }
               .padding(.bottom, keyboard.height)
               .background(
                   GeometryReader { proxy in
                       Color.clear.onAppear {
                           self.keyboard.width = proxy.size.width
                       }
                   }
               )
           }
       }
   }
   

   1. Crea una clase KeyboardResponder que observe los cambios en la altura del teclado y notifique a la KeyboardObservingScrollView.

   class KeyboardResponder: ObservableObject {
       @Published var height: CGFloat = 0
       var width: CGFloat = 0
       private var cancellable: AnyCancellable?
   
       init() {
           let keyboardWillShow = NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)
           let keyboardWillHide = NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)
   
           cancellable = Publishers.Merge(keyboardWillShow, keyboardWillHide)
               .compactMap {
                   $0.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect
               }
               .map {
                   $0.height > 0 ? $0.height - UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0 : 0
               }
               .receive(on: DispatchQueue.main)
               .assign(to: \.height, on: self)
       }
   }
   

   1. Utiliza la KeyboardObservingScrollView en tu vista de mensajería y establece el foco del ScrollViewReader en la parte inferior para asegurarte de que el último mensaje siempre sea visible.

   struct MessagingView: View {
       @State private var messages = ["¡Hola!", "¿Cómo estás?", "¡Estoy bien, gracias!"]
   
       var body: some View {
           VStack {
               KeyboardObservingScrollView {
                   ScrollViewReader { proxy in
                       LazyVStack(alignment: .leading, spacing: 10) {
                           ForEach(messages, id: \.self) { message in
                               Text(message)
                                   .padding(10)
                                   .foregroundColor(.white)
                                   .background(Color.blue)
                                   .cornerRadius(10)
                           }
                       }
                       .padding()
                       .onChange(of: messages.count) { _ in
                           withAnimation {
                               proxy.scrollTo(messages.count - 1, anchor: .bottom)
                           }
                       }
                   }
               }
               .background(Color(UIColor.systemGray6))
               .cornerRadius(10)
               .padding()
   
               TextField("Escribe un mensaje...", text: .constant(""))
                   .padding(10)
                   .background(Color(UIColor.systemGray6))
                   .cornerRadius(10)
                   .padding()
           }
       }
   }
   

   Con esta implementación, la KeyboardObservingScrollView ajustará el margen interno y el desplazamiento del contenido para asegurarse de que el último mensaje siempre sea visible por encima del teclado.

Comments are closed.