Cómo crear tu primer ViewModel en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:37

Cómo crear tu primer ViewModel en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 17 de 23

Clase 17 / 23

Recursos

Refactorizar un formulario en SwiftUI con un view model te permite separar la lógica de negocios de la vista y mantener un código limpio y mantenible. Aquí aprenderás a crear tu primer view model usando ObservableObject y @Published, conectándolo con tu vista mediante @StateObject, ideal si ya construiste formularios básicos en SwiftUI y quieres dar el siguiente paso hacia una arquitectura escalable.

Por qué separar la lógica del formulario en un view model

Cuando dejas todos los estados y funciones dentro de la vista, el archivo crece y se vuelve difícil de leer. Mover esa lógica a un view model te da claridad y reutilización.

En el ejemplo de la clase, partimos de un formulario que crea notas (NCreateNoteView) y lo reorganizamos en una carpeta dedicada. Dentro de Views creamos la carpeta NCreateNote y movemos ahí la vista existente, junto con un nuevo archivo Swift llamado NCreateNoteViewModel [00:35].

¿Qué es un view model en SwiftUI? Es una clase que centraliza el estado y la lógica de negocios de una vista. Se comunica con la interfaz mediante propiedades observables, dejando a la vista solo la responsabilidad de mostrar datos.

Cómo se usa ObservableObject y Published en una clase

La clase NCreateViewModel se declara con el protocolo ObservableObject. Este tipo le indica a la vista que observe toda la clase, no solo una variable suelta [01:05].

Dentro del view model ya no usas @State ni variables privadas. En su lugar:

Marcas cada propiedad observable con @Published.
Eliminas el modificador private para que los valores sean accesibles desde la vista.
Mueves los cuatro estados originales (title, text, size, isFavorite) y los conviertes en propiedades publicadas.

El resultado es una clase que expone su estado de forma reactiva: cualquier cambio en una propiedad @Published notifica a la vista para que se actualice.

Cómo encapsular la creación de la nota en una función

La lógica de construir el modelo NCard también vive en el view model. Justo debajo de las propiedades, agregas una función createNote() que retorna un NCard con los valores actuales del view model [02:00].

Así, la vista no sabe cómo se ensambla la nota. Solo pide el resultado.

Cómo conectar la vista con el view model usando StateObject

En la vista eliminas los @State antiguos y declaras una sola propiedad:

swift @StateObject var viewModel = NCreateViewModel()

Al borrar los estados originales, Xcode muestra errores en cada referencia. La solución es reemplazar los nombres directos por la propiedad del view model: title pasa a viewModel.title, text a viewModel.text, size a viewModel.size y isFavorite a viewModel.isFavorite [02:35].

En el onTap del botón de guardar tampoco construyes la nota inline. Llamas a la función:

swift let card = viewModel.createNote()

¿Cuándo uso StateObject en lugar de State? Usa @StateObject cuando observas un objeto completo como un view model. Usa @State para tipos simples como Int, Bool o String que pertenecen solo a la vista.

La razón es directa: @State está pensado para valores primitivos locales, mientras que @StateObject mantiene viva una instancia de clase observable durante el ciclo de vida de la vista [03:30].

Cómo agregar la propiedad isFavorite al modelo NCard

Aprovechando la refactorización, completas la funcionalidad de favoritos. En el archivo del modelo NCard, justo debajo de type, agregas:

swift var isFavorite: Bool = false

Usas var y no let porque en el futuro querrás cambiar el valor de favorito sin recrear la nota [04:10]. El valor por defecto en false evita romper instancias existentes.

Después, en la función createNote() del view model, pasas isFavorite: viewModel.isFavorite al inicializar el NCard. La vista ya tiene el toggle conectado a viewModel.isFavorite, así que el flujo queda completo.

Cómo verificar el comportamiento en el preview

Al probar en el preview, creas una nota con título, texto, tamaño pequeño y marcas el toggle de favorito. Al pulsar guardar, la consola imprime el NCard con isFavorite: true [05:00].

Esa salida confirma tres cosas:

El view model recibe correctamente las entradas del usuario.
La función createNote() construye la nota con todos los valores actuales.
La vista quedó desacoplada de la lógica de creación.

Qué ganas al estructurar tu formulario con un view model

La vista pasa de tener cuatro estados sueltos y la construcción del modelo en línea a una sola propiedad @StateObject. Todo el resto vive en una clase observable, lista para escalar.

Este patrón es la base de MVVM en SwiftUI y te prepara para manejar datos más complejos: persistencia, llamadas a red o validaciones. Cuéntame en los comentarios cómo organizas tus view models y qué propiedades sueles marcar con @Published.

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Cómo crear tu primer ViewModel en SwiftUI

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos