Listado y detalle de notas en SwiftUI

Contenido del curso

No sé dónde empezar

Introducción al Patrón MVVM

Estructura de un Proyecto con MVVM

Operaciones CRUD en un proyecto con MVVM

Clean Architecture

MVVM y Clean Architecture

28
Resumen de Clean Architecture y MVVM
06:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0022:35

Listado y detalle de notas en SwiftUI

Curso de Patrones MVVM en iOS

Clase 13 de 28

Clase 13 / 28

Recursos

Cuando construyes una app de notas en SwiftUI, agregar tareas es solo la mitad del camino. La otra mitad consiste en listar las notas y mostrar su detalle de forma fluida, usando un patrón MVVM con environment object, filtros y vistas previas animadas. Aquí verás cómo conectar la vista con el view model, filtrar tareas no archivadas y mostrar un preview al tocar cada elemento.

Cómo conecto el view model con la vista de lista

Lo primero es darle a tu vista acceso al view model compartido. En el archivo ToDoList, declaras una referencia con la anotación @EnvironmentObject y creas una variable de tipo ToDoViewModel [00:13]. Esta anotación permite que la vista lea los datos sin tener que instanciar manualmente el modelo.

Junto con esa referencia, necesitas dos variables de estado para controlar la interfaz:

showSheet: indica si está abierta la pantalla para crear una nueva nota.
toDoToPreview: de tipo ToDoEntity, indica si hay una nota en vista previa.

La segunda se declara con @State private var y arranca vacía [00:48]. Su función es disparar la aparición del detalle cuando el usuario toca una tarjeta.

¿Qué hace @EnvironmentObject en SwiftUI? Inyecta una instancia compartida del view model en cualquier vista del árbol, sin pasarla como parámetro. Es ideal para datos globales como una lista de tareas.

Cómo filtro las tareas no archivadas con una variable computada

Las notas se muestran en dos pantallas distintas, así que necesitas separar las archivadas de las que siguen activas. Para eso creas una variable privada llamada unarchivedTodos de tipo [ToDoEntity] [01:33].

La lógica usa el método filter sobre la propiedad pública todos del view model:

swift private var unarchivedTodos: [ToDoEntity] { viewModel.todos.filter { !$0.isArchived } }

El filter itera toda la colección desde la posición cero y devuelve solo los elementos donde isArchived sea falso [02:30]. Así obtienes una lista limpia para la pantalla principal, sin importar si la tarea está terminada o pendiente.

Cómo muestro las notas en una grilla con LazyVGrid

Dentro del ScrollView validas primero que existan elementos para mostrar. Usas if !unarchivedTodos.isEmpty y, si la condición se cumple, renderizas un LazyVGrid [03:25].

Este componente recibe varios parámetros clave:

columns: una variable previa con dos columnas tipo grid.
spacing: separación de 8 puntos entre items.
padding(.horizontal): para que no se peguen a los bordes.

La estructura queda lista para recibir las tarjetas. Para insertar cada elemento, usas un ForEach que itera sobre unarchivedTodos y, por cada todo, instancia un ToDoItemView enviando el parámetro toDo [05:50].

Cómo diseño cada tarjeta en ToDoItemView

En ToDoItemView declaras de nuevo el @EnvironmentObject y una variable pública let toDo: ToDoEntity. Antes de pintar el VStack, validas que el identificador no esté vacío con un if; en el else devuelves EmptyView() para evitar errores visuales [04:35].

Dentro de la tarjeta accedes a toDo.date para mostrar la fecha y, debajo, agregas una validación if let description = toDo.notes para mostrar la descripción solo cuando exista. El texto usa modificadores como .font(.caption), .fontWeight(.light) y .lineLimit(3) [06:50].

¿Para qué sirve LazyVGrid frente a un VStack? Renderiza los elementos solo cuando entran en pantalla, lo que mejora el rendimiento en listas largas. Además permite distribuir tarjetas en varias columnas con muy poca configuración.

Cómo abro el detalle de una nota con onTapGesture y overlay

Para que cada tarjeta sea interactiva, agregas un onTapGesture dentro del ForEach que asigna la nota tocada a toDoToPreview [07:55]. Ese cambio dispara la aparición de la vista previa.

La magia ocurre en la sección overlay del ZStack. Allí ya existe un if que muestra la pantalla de creación cuando showSheet es verdadero. Agregas un else if que valida toDoToPreview != nil y, si es así, instancia ToDoPreviewView pasándole el binding $toDoToPreview [08:30].

Para que la aparición se sienta natural, añades una transición animada:

swift .transition(AnyTransition.opacity.animation(.easeIn))

También bloqueas la barra de navegación con navigationBarHidden evaluando si showSheet está activo o si toDoToPreview no está vacío [04:00].

Cómo construyo ToDoPreviewView con binding y validación

En ToDoPreviewView defines tres propiedades:

@EnvironmentObject private var viewModel: ToDoViewModel.
@Binding public var toDo: ToDoEntity? para recibir la nota seleccionada.
@State private var showedToDoCreationSheet: Bool = false para controlar la edición.

Dentro del body, envuelves el contenido en un ZStack y usas if let savedToDo = toDo para mostrar el detalle solo si llega una entidad válida [09:50]. En el else, devuelves una vista vacía.

Después accedes a savedToDo.title para el encabezado y, fuera del HStack, validas if let note = savedToDo.notes, !note.isEmpty para pintar la descripción con .multilineTextAlignment(.center) [11:00].

Cómo cierro la vista previa al tocar el fondo difuminado

Falta un detalle de usabilidad: si el usuario toca fuera de la tarjeta, la pantalla debe cerrarse. En la parte superior del ZStack hay un Rectangle que actúa como fondo difuminado. Le agregas una acción que asigna toDo = nil, lo que limpia el binding y oculta el preview automáticamente [11:50].

Con esto cierras el flujo completo: listas las notas no archivadas, las muestras en una grilla, abres el detalle con un tap y cierras la vista previa con otro toque. ¿Qué función agregarías después: archivar, editar o eliminar? Cuéntame en los comentarios cuál implementarías primero.

Resumen

Cómo conecto el view model con la vista de lista

Junto con esa referencia, necesitas dos variables de estado para controlar la interfaz:

showSheet: indica si está abierta la pantalla para crear una nueva nota.
toDoToPreview: de tipo ToDoEntity, indica si hay una nota en vista previa.

La segunda se declara con @State private var y arranca vacía [00:48]. Su función es disparar la aparición del detalle cuando el usuario toca una tarjeta.

¿Qué hace @EnvironmentObject en SwiftUI? Inyecta una instancia compartida del view model en cualquier vista del árbol, sin pasarla como parámetro. Es ideal para datos globales como una lista de tareas.

Cómo filtro las tareas no archivadas con una variable computada

La lógica usa el método filter sobre la propiedad pública todos del view model:

swift private var unarchivedTodos: [ToDoEntity] { viewModel.todos.filter { !$0.isArchived } }

Cómo muestro las notas en una grilla con LazyVGrid

Dentro del ScrollView validas primero que existan elementos para mostrar. Usas if !unarchivedTodos.isEmpty y, si la condición se cumple, renderizas un LazyVGrid [03:25].

Este componente recibe varios parámetros clave:

columns: una variable previa con dos columnas tipo grid.
spacing: separación de 8 puntos entre items.
padding(.horizontal): para que no se peguen a los bordes.

Cómo diseño cada tarjeta en ToDoItemView

¿Para qué sirve LazyVGrid frente a un VStack? Renderiza los elementos solo cuando entran en pantalla, lo que mejora el rendimiento en listas largas. Además permite distribuir tarjetas en varias columnas con muy poca configuración.

Cómo abro el detalle de una nota con onTapGesture y overlay

Para que cada tarjeta sea interactiva, agregas un onTapGesture dentro del ForEach que asigna la nota tocada a toDoToPreview [07:55]. Ese cambio dispara la aparición de la vista previa.

Para que la aparición se sienta natural, añades una transición animada:

swift .transition(AnyTransition.opacity.animation(.easeIn))

También bloqueas la barra de navegación con navigationBarHidden evaluando si showSheet está activo o si toDoToPreview no está vacío [04:00].

Cómo construyo ToDoPreviewView con binding y validación

En ToDoPreviewView defines tres propiedades:

@EnvironmentObject private var viewModel: ToDoViewModel.
@Binding public var toDo: ToDoEntity? para recibir la nota seleccionada.
@State private var showedToDoCreationSheet: Bool = false para controlar la edición.

Dentro del body, envuelves el contenido en un ZStack y usas if let savedToDo = toDo para mostrar el detalle solo si llega una entidad válida [09:50]. En el else, devuelves una vista vacía.

Cómo cierro la vista previa al tocar el fondo difuminado

Introducción al Patrón MVVM

Implementación de MVVM en Swift: Organiza y Optimiza tus Apps

Patrones de Arquitectura y Diseño en Desarrollo de Software iOS

MVC vs MVP en iOS: diferencias clave

Qué son los principios SOLID

MVVM y SOLID en SwiftUI

Estructura de un Proyecto con MVVM

Proyecto MVVM en Swift: Buenas Prácticas y Configuración Inicial

Cómo crear el modelo Item con MVVM en Swift

Modelo de datos con Core Data en Swift

Vistas en MVVM con SwiftUI

Cómo conectar CoreData y Combine en MVVM

Operaciones CRUD en un proyecto con MVVM

Función addTodo con Core Data en SwiftUI

Funcionalidades básicas para gestionar tareas en SwiftUI

Listado y detalle de notas en SwiftUI

Editar todos con SwiftUI y Core Data

Archivar tareas en SwiftUI con Core Data

Cómo desarchivar tareas con unarchiveTodo

Eliminar un to do definitivamente con Core Data

Marcar tareas completadas en SwiftUI

Creación de Vistas Amigables en SwiftUI para Aplicaciones de Tareas

Clean Architecture

Qué es Clean Architecture y por qué supera a MVVM

Estructura y Ventajas de la Clean Architecture

Estructura de proyecto iOS con Clean Architecture

Mapeo de JSON a structs Swift con Codable

Capa de datos con Clean Architecture en Swift

Casos de uso en la capa de dominio Swift

Capa de presentación con MVVM en SwiftUI

Navegación y detalle con Clean Architecture en SwiftUI

MVVM y Clean Architecture

Resumen de Clean Architecture y MVVM

Listado y detalle de notas en SwiftUI