SwiftUI #1: Proyecto plantilla

#swiftui #template #project #ios

Supongamos que quiero construir una aplicación llamada "Memora". Cuando uso la plantilla de Xcode para SwiftUI puedo ver que se genera un proyecto con la siguiente estructura:

Memora
| - Memora
| | - MemoraApp.swift
| | - ContentView.swift
| | - Assets.xcassets
| | - Info.plist
| | - Preview Content
| | | - Preview Assets.xcassets

MemoraApp hace las veces de AppDelegate donde se va a configurar la aplicación. Se puede ver que tiene una etiqueta @main que señala el punto de partida de la aplicación. Por otro lado, la estructura MemoraApp conforma el protocolo App que, aparte de tener un body de tipo some Scene, que sirve para gestionar las varias escenas de la pantalla, genera la función static main para arrancar la aplicación.

import SwiftUI
//
@main
struct MemoraApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Por otro lado tenemos a ContentView que es una estructura que conforma a View, que debe tener un body de tipo some View.

import SwiftUI
struct ContentView: View {
  var body: some View {
    Text("Hello, world!")
      .padding()
  }
}

Previsualización

En la parte inferior del archivo aparece un ContentView_Previews de tipo PreviewProvider, que fue sustituido en versiones recientes de Xcode con #Preview. Este produce la previsualización del lado derecho de la pantalla que debe ser usada para mostrar varios casos de uso de la pantalla en cuestión que no debe ser muy compleja. En caso de que no cargue la previsualización (diría "Preview paused"), hacer clic en el botón de reanudar.

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}
#Preview {
    ContentView()
}

En caso de querer previsualizar el contenido en una ventana que se ajuste al tamaño intrínseco del contenido, hay que usar el "trait" .sizeThatFitsLayout (disponible desde iOS 17) si se usa #Preview o .previewLayout(.sizeThatFits) en la estructura que conforma PreviewProvider (que no está disponible dentro de #Preview).

// Usando #Preview
#Preview(traits: .sizeThatFitsLayout) {
  // Solo disponible desde iOS 17
  ZStack {
    Color.element
    Text("Hola mundo")
      .padding()
  }
  .frame(width: 300, height: 100)
}
// Usando PreviewProvider
struct Example_Previews: PreviewProvider {
  static var previews: some View {
    // Solo disponible desde iOS 17
    ZStack {
      Color.element
      Text("Hola mundo")
        .padding()
    }
    .frame(width: 300, height: 100)
    .previewLayout(.sizeThatFits)
  }
}

En caso de que se ponga un punto de quiebre en el código, este solo servirá al ejecutar la aplicación en un simulador. El modo de previsualización, desde Xcode 13, no ejecuta el código en modo Depuración (Debug) por lo que es imposible depurarla.

Configuración de la previsualización

En la esquina inferior izquierda del canvas hay una opción llamada "Device settings" que permite configurar, de forma gráfica, aspectos como .preferredColorScheme(.dark) o la orientación de interfaz preferida (e.g. landscapeLeft). Esta opción aparece deshabilitada cuando la previsualización se construye conformando el protocolo PreviewProvider.
En la parte inferior del área de trabajo, cerca del botón azul para habilitar/deshabilitar los puntos de interrupción, está el botón "Environment Overrides" que permite cambiar algunos valores sobre el simulador, similares al "Device settings" anterior. Se puede encontrar una lista de las variables de ambiente del dispositivo aquí.
En la parte inferior del canvas, al lado derecho del botón "Device Settings", aparece un botón que permite elegir el dispositivo en el que se quiere previsualizar la vista. Si se usa PreviewProvider se puede poner el modificador .previewDevice() que recibe un PreviewDevice(rawValue: "…"), que a su vez recibe por parámetro el nombre del dispositivo que se quiere usar. Este último modificador es ignorado cuando se usa #Preview.
A una previsualización se le puede cambiar el título. Si se usa #Preview, basta con ponerlo dentro de los paréntesis. Si se usa PreviewProvider se puede poner con .previewDisplayName().

Canvas / Lienzo

El botón "Selectable" de la parte inferior del preview permite hacer clic sobre un componente visual para resaltarlo, cambiando el color de su borde a azul.
El botón "Live" de la parte inferior del preview permite interactuar con la aplicación como si estuviera ejecutándose en un simulador.
En la esquina superior izquierda del canvas hay un botón que permite anclar cierta previsualización a la pantalla, lo que permite hacer cambios en otro archivo sin tener que ir y volver para ver como afecta a la vista anclada.
Hacer Command + Shift + L para abrir la biblioteca de componentes. Allí tendremos varias categorías: Views, Modifiers, Snippets, Media. Para mantener la biblioteca de componentes abierta hacer Command + Option + Shift + L.
Para recargar la previsualización usar Option + Command + P.

Algunas características modo "Selectable"

Para lo siguiente se asume que el canvas está en modo "Selectable":

Al hacer Option + click en un componente visual, se resalta el código en la vista asociada que lo construye.
Al hacer Command + click (o Control + Command + click) en un componente visual, se despliega un menú encima con varias opciones, entre ellas: "Embed". Al hacer clic en esta, se agrega una plantilla que envuelve al componente visual en un contenedor. NOTA: Solo se puede envolver un componente.

Bibliografía

Kodeco Team; Bello, A.; Morefield, B.; Reichelt, S.; & Tam, A. (2023). SwiftUI by Tutorials (Fifth Edition): Declarative App Development on the Apple Ecosystem. Kodeco Incorporated.

DEV Community