Cómo configurar la altura de un sheet

Misael Cuevas

24 abril, 20244min de lectura

SwiftUI te permite ajustar la altura de los sheets a tu medida utilizando el modificador presentationDetents. Con este modificador, puedes especificar una o varias alturas para tus sheets, que son las siguientes:

1. large: Esta opción utiliza toda la altura disponible, siendo el valor predeterminado al presentar un sheet en SwiftUI sin necesidad de usar presentationDetents.
2. medium: Utiliza aproximadamente la mitad de la pantalla como altura.
3. fraction(_:): Emplea una fracción de la altura disponible. El valor debe estar entre 0.0 y 1.0, por ejemplo, .fraction(0.3) para utilizar el 30% de la altura disponible.
4. height(_:): Especifica una altura concreta, por ejemplo, .height(300) para usar 300 puntos de altura.
5. custom(_:): Se utiliza para establecer una altura calculada. Verás un ejemplo de esto más adelante.

Por ejemplo, para mostrar un sheet con una altura aproximadamente a la mitad de la pantalla:

import SwiftUI

struct ContentView: View {
  // 1
  @State private var isPresenting = false

  var body: some View {
    // 2
    Button("Show sheet") {
      isPresenting.toggle()
    }
    .sheet(isPresented: $isPresenting) {
      // 3
      Text("Hello world")
        .presentationDetents([.medium])
    }
  }
}

1. Se define la variable de estado isPresenting para determinar cuando se debe de presentar el sheet.
2. Un botón que al ser presionado cambia el valor de isPresenting a true para mostrar el sheet.
3. Se muestra un texto en el sheet y se utiliza el modificador presentationDetents para establecer la altura de este.

Como se mencionó antes, también puedes establecer múltiples alturas, por ejemplo:

.presentationDetents([.medium, .fraction(0.8), .height(200)])

Al establecer varias alturas, se muestra un indicador superior en el sheet que indica que soporta varias alturas.

Para utilizar custom(_:), primero debes crear una estructura que conforme al protocolo CustomPresentationDetent y que requiera definir la altura deseada a través de la función estática height(in context: Context). Por ejemplo:

// 1
struct CustomDetent: CustomPresentationDetent {
  // 2
  static func height(in context: Context) -> CGFloat? {
    // 3
    max(100, context.maxDetentValue * 0.3)
  }
}

1. Se define la estructura CustomDetent que se conforma al protocolo CustomPresentationDetent.
2. El protocolo CustomPresentationDetent requiere definir la altura a través de la función height. El parámetro context contiene información, como valores del entorno, que pueden ayudarte a determinar la altura que deseas definir.
3. Retorna el valor mayor entre 100 o el 30% de context.maxDetentValue. maxDetentValue es una propiedad calculada que retorna la altura disponible donde aparecerá el sheet.

De la siguiente manera puedes utilizar la estructura CustomDetent:

.presentationDetents([.custom(CustomDetent.self)])

Por último, es importante destacar que el modificador presentationDetents posee el parámetro selection, que te permite conocer en el código cuál es la altura seleccionada en el sheet y modificarla. Por ejemplo:

import SwiftUI

struct ContentView: View {
  @State private var isPresenting = false
  // 1
  @State private var sheetDetentSelection = PresentationDetent.height(100)

  var body: some View {
    Button("Show sheet") {
      isPresenting.toggle()
    }
    .sheet(isPresented: $isPresenting) {
      // 2
      Button("Change Size") {
        sheetDetentSelection = .medium
      }
      .presentationDetents([.medium, .large, .height(100)], selection: $sheetDetentSelection)
    }
  }
}

1. Se define la variable de estado sheetDetentSelection para conocer la altura seleccionada, por defecto es PresentationDetent.height(100).
2. Establece un sheet con tres alturas establecidas y asigna la variable sheetDetentSelection al parámetro selection. Al presionar Change Size, se modifica la altura del botón a .medium.

Si quieres seguir aprendiendo más de sheets en SwiftUI, te recomiendo este artículo en nuestro blog para saber cómo bloquear sheets.