En este tutorial veremos como implementar Swipe to Delete en SwiftUI, es decir, como podemos dejar a los usuarios borrar filas de una lista.
En el desarrollo de aplicaciones móviles, es un requisito común brindarles a los usuarios la posibilidad de eliminar elementos de una lista, lo que a menudo se logra con un gesto de deslizar para eliminar. En SwiftUI, esta funcionalidad es fácil de agregar con el modifier .onDelete.
Vamos a ver un ejemplo:
@State private var users = ["Paul", "Taylor", "Adele"]
var body: some View {
NavigationStack {
List {
ForEach(users, id: \.self) { user in
Text(user)
}
.onDelete { (IndexSet) in
self.users.remove(atOffsets: IndexSet)
} }
.navigationTitle("Users")
}
}En este ejemplo primero configuramos una NavigationStack que contiene una List. Completarás esta lista usando un bucle ForEach que recorre el array de elementos. Cada elemento del bucle ForEach se presenta usando una vista de texto.
Para implementar la funcionalidad de deslizar para eliminar, agregamos el modifier .onDelete a ForEach.
En el closure de onDelete, pasamos un indexSet que contiene el índice de las filas que tienen que ser borradas. Entonces llamamos al método remove con el indexSet para borrar ítems específicos en el array users.
Ten en cuenta que cada vez que el usuario borra una fila de la lista, la UI debe ser actualizada. Nota que usamos la keyword @State en SwiftUI para notificar a SwiftUI que debe supervisar la propiedad y actulizar la UI cuando sea que el valor de la propiedad cambia.
Ahora, cuando ejecutes la aplicación, podrás deslizar el dedo hacia la izquierda sobre un elemento para que aparezca un botón de Delete. Al pulsar el botón Delete, se eliminará el elemento de la lista.
Por otra parte, ¿te has dado cuenta de la bonita animación que hay cuando una fila es borrada? No necesitas escribir ningún código extra. Esta animación es automaticamente generada por SwiftUI.
