NavigationSplitView: dos y tres columnas

Una pila responde a la pregunta “dónde estoy”. Una vista dividida responde a otra distinta: “qué tengo seleccionado”. NavigationSplitView no es la versión ancha de NavigationStack, es un modelo de navegación con otra ontología, donde las columnas coexisten y el vínculo entre ellas es un valor seleccionado, no un historial. Y su virtud mayor es que esa misma definición se colapsa sola en una pila cuando el espacio desaparece.

La selección como vínculo

En dos columnas hay una barra lateral y un detalle. Lo que las une es una propiedad opcional: el elemento elegido. Si vale nada, el detalle muestra un marcador de posición; si tiene valor, muestra ese contenido.

struct Biblioteca: View {
    @State private var seleccion: Tarea.ID?

    var body: some View {
        NavigationSplitView {
            List(tareas, selection: $seleccion) { tarea in
                Text(tarea.titulo)
            }
            .navigationTitle("Tareas")
        } detail: {
            if let id = seleccion {
                DetalleTarea(id: id)
            } else {
                ContentUnavailableView("Sin selección", systemImage: "sidebar.left")
            }
        }
    }
}

El opcional no es un detalle de implementación: es el estado completo de la navegación. No hay historial, no hay profundidad, no hay retroceso. Hay un valor que cambia y dos columnas que reaccionan. Por eso una List con parámetro selection basta para navegar sin escribir un solo enlace.

flowchart LR
S[seleccion opcional] --> C1[columna lateral resalta]
S --> C2[columna detalle muestra]
C1 --> S
style S fill:#a6e3a1,color:#11111b

Tres columnas y la pila interior

La variante de tres columnas encadena dos selecciones: la primera columna elige categoría, la segunda elige elemento dentro de esa categoría, la tercera muestra el contenido.

struct Correo: View {
    @State private var buzon: Buzon?
    @State private var mensaje: Mensaje.ID?
    @State private var rutaDetalle: [RutaMensaje] = []

    var body: some View {
        NavigationSplitView {
            List(buzones, selection: $buzon) { Text($0.nombre) }
        } content: {
            List(mensajes(de: buzon), selection: $mensaje) { Text($0.asunto) }
        } detail: {
            NavigationStack(path: $rutaDetalle) {
                VistaMensaje(id: mensaje)
                    .navigationDestination(for: RutaMensaje.self) { destino($0) }
            }
        }
    }
}

Dos cosas merecen atención. La primera es la cascada: al cambiar el buzón, la selección de mensaje deja de tener sentido y hay que ponerla a nada, o el detalle mostrará un mensaje que ya no pertenece a la lista visible. La segunda es la pila dentro del detalle, que es el patrón correcto y no una anidación sospechosa: la tercera columna sí tiene historial propio —del mensaje al hilo, del hilo al adjunto— y ese historial no debe alterar las columnas de la izquierda.

.onChange(of: buzon) { _, _ in
    mensaje = nil            // la cascada evita detalles huerfanos
    rutaDetalle.removeAll()  // y limpia el historial de la columna
}

Una definición, tres tamaños

Lo notable de este contenedor es que no tienes que ramificar por dispositivo. Cuando el ancho disponible es pequeño, el sistema colapsa las columnas en una pila: la barra lateral pasa a ser la raíz, y seleccionar equivale a empujar. Cuando hay espacio, las despliega. La misma definición sirve para iPhone, iPad, Mac y una ventana redimensionable, y las clases de tamaño hacen el resto.

Que el colapso sea automático no significa que sea gratuito de diseñar. La barra lateral pasará a ser la primera pantalla del teléfono, así que su título, su barra de herramientas y su estado vacío tienen que sostenerse por sí solos; y el detalle, que en el iPad convive con la lista, en el teléfono aparecerá solo y necesita un encabezado que recuerde de dónde viene.

Sobre esa base hay tres palancas de ajuste que conviene conocer.

Hay además un detalle de la barra lateral que conviene interiorizar: dentro de ella, un NavigationLink con valor no empuja una pantalla sobre la columna, sino que actualiza la selección y por tanto reemplaza el detalle. Es el mismo enlace de la primera lección comportándose distinto según el contenedor que lo alberga, lo cual es coherente con la idea de que el enlace propone un valor y el contenedor decide qué hacer con él.

@State private var columnas: NavigationSplitViewVisibility = .automatic

NavigationSplitView(columnVisibility: $columnas) {
    Lateral().navigationSplitViewColumnWidth(min: 200, ideal: 250, max: 320)
} detail: {
    Detalle()
}
.navigationSplitViewStyle(.balanced)

El estilo equilibrado reparte el ancho entre columnas y desplaza el detalle al mostrar la barra lateral; el estilo que prioriza el detalle mantiene su tamaño y superpone la barra encima. La elección no es estética: si el detalle contiene un lienzo, un mapa o un reproductor cuyo encuadre no debe moverse, superponer es la única opción razonable. Si el detalle es texto que puede refluir, equilibrar da una sensación de continuidad mucho mejor.