Cómo utilizar Inspector en SwiftUI para mejorar tus vistas

Con iOS 17, Apple ha introducido .inspector(isPresented:content:), un modificador que nos permite agregar vistas para mostrar fácilmente detalles adicionales del contenido de nuestra app. Este se comporta como el modificador sheet, si solo trabajamos con iOS, pero provee mayor adaptabilidad para más plataformas como iPad o Mac, veremos esto con un ejemplo en breve.

Los inspectores no son un concepto nuevo en el ecosistema de Apple. Por ejemplo, en Xcode tenemos una serie de inspectores disponibles para acceder rápidamente a información, como el Inspector de Archivos:

Captura de pantalla mostrando el Inspector de Archivos de Xcode.

Ejemplo de cómo crear un Inpector

Imaginemos una app en la que los usuarios pueden seleccionar un cliente para obtener más información sobre él. Hay varias formas de lograr esto, veamos cómo podemos conseguirlo usando el nuevo modificador inspector(isPresented:content:).

Caso de uso

Nuestro caso de uso consiste en mostrar detalles de un cliente cuando hacemos tap sobre la casilla que contiene sus datos en una lista. Comenzaremos con el siguiente código, donde ya tenemos un listado de clientes:

struct InspectorExample: View {
var body: some View {
VStack {
List(Self.customers, id: \.id) { customer in
makeCustomerItem(customer)
}
}
}
}
Listado de clientes en un app de iOS.

Primero, agregamos las variables que necesitaremos y, como estas provocarán cambios en la interfaz de usuario, usamos @State:

struct InspectorExample: View {
@State private var showInspector = false
@State private var selectedCustomer = Self.customers[0]
var body: some View {
VStack {
List(Self.customers, id: \.id) { customer in
makeCustomerItem(customer)
}
}
}
}

showInspector es un booleano que indicará cuándo se debe mostrar el inspector y selectedCustomer guardará los datos del cliente seleccionado.

¡Ahora viene la parte más interesante! Agreguemos el inspector. Donde termina el VStack, agregamos el modificador:

// 1
.inspector(isPresented: $showInspector) {
// 2
CustomerDetailView(customer: selectedCustomer)
// 3
.inspectorColumnWidth(min: 300, ideal: 300, max: 400)
// 4
.toolbar {
Spacer()
Button {
showInspector.toggle()
} label: {
Label("Close", systemImage: "xmark.circle")
}
}
}

Veamos qué está pasando en este código:

  1. Usamos .inspector(isPresented:content:) con un binding a la variable showInspector.
  2. Pasamos el cliente seleccionado a la vista CustomerDetailView.
  3. Configuramos el ancho del inspector. Esto es especialmente útil porque podemos usar este mismo código para iPad y Mac, donde en lugar de usar un sheet se muestra en el lateral.
  4. Agregamos un .toolbar(content:) con un botón para poder cerrar el inspector.

Así es como se ve el resultado en iOS:

Vista completa de clientes en iOS. Muestra el Inspector cuando hacemos tap sobre un cliente.

Como indicamos el ancho deseado utilizando .inspectorColumnWidth(min: 300, ideal: 300, max: 400), veamos cómo se ve en iPad el mismo código sin hacer ningún cambio:

Vista completa de clientes en iPad. Muestra el Inspector cuando hacemos tap sobre un cliente..

Personalizando el comportamiento del Inspector

Contamos con muchas opciones para personalizar el comportamiento y la apariencia de un Inspector:

  • .presentationBackground(_:) permite asignar un background para el sheet.
  • .presentationBackgroundInteraction(_:) elimina la vista oscura que cubre el contenido, permitiendo interactuar con él.

Opciones solo disponibles cuando el Inspector es un sheet

  • .presentationDetents(_:) establece los diferentes tamaños que puede tener el sheet.
  • .presentationCornerRadius(_:) para modificar el radio de las esquinas.
  • .presentationContentInteraction(_:) para controlar cómo responde a gestos.
  • .presentationCompactAdaptation(_:) para especificar cómo adaptarse a tamaños compactos.

Modifiquemos un poco nuestro inspector para usar algunos de estos modificadores:

.inspector(isPresented: $showInspector) {
CustomerDetailView(customer: selectedCustomer)
.presentationDetents([.height(250), .medium, .large])
.presentationBackgroundInteraction(.disabled)
.inspectorColumnWidth(min: 300, ideal: 300, max: 400)
.toolbar {
Spacer()
Button {
showInspector.toggle()
} label: {
Label("Toggle Inspector", systemImage: "xmark.circle")
}
}
}

Al código que vimos anteriormente le agregamos estas dos líneas:

.presentationDetents([.height(250), .medium, .large])
.presentationBackgroundInteraction(.disabled)

La primera indica los diferentes tamaños que puede tener el sheet. La segunda indica que mientras el sheet esté presente, no se podrá interactuar con la pantalla principal. Así queda el app:

Vista completa de clientes en iOS. Muestra el Inspector cuando hacemos tap sobre un cliente y como se bloquea la pantalla principal.

Cómo posicionar un Inspector

Dependiendo de dónde coloquemos el modificador .inspector(isPresented:content:) y para qué dispositivo estemos creando la app, el toolbar se mostrará de manera diferente. En el siguiente diagrama se muestran las diferentes configuraciones:

Diagrama de los diferentes posicionamientos.

Conclusión

Los inspectores son vistas que muestran más detalles del contenido seleccionado. Se pueden ocultar/mostrar y cambiar su ancho programáticamente. Además, se pueden personalizar con diferentes modificadores, como presentationBackgroundInteraction(_:) y presentationContentInteraction(_:).

Al utilizar .inspector(isPresented:content:), puedes mejorar la experiencia del usuario de tus vistas y proporcionar más contexto e información a tus usuarios.

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn