Hojas personalizadas para SwiftUI

Mar 09 2023

¿Alguna vez ha querido crear una hoja personalizada con altura dinámica en SwiftUI? Dado que Apple proporciona un componente de hoja nativo, es fácil de usar para diseñar cualquier tipo de hoja personalizada que necesitemos en nuestra aplicación iOS. Sin embargo, no siempre fue así.

Sin embargo, no siempre fue así. Las versiones anteriores de iOS, como iOS 14, no admiten esta función. Entonces, si su aplicación es compatible con esas versiones de iOS, no puede darse el lujo de resolver este problema sin problemas. ¡Pero no te preocupes! Una vez que lea este artículo, podrá lograr hojas con altura dinámica en cualquier iOS que admita SwiftUI. Démosle una oportunidad.

Crear hojas personalizadas no es nada complicado. Sólo sigue mis pasos.

Paso 1: crear una nueva vista para la hoja inferior

Primero necesitamos crear un nuevo archivo SwiftUI View, por lo que dividimos nuestro código en varios archivos. Llamé al mío "BottomSheetView", puedes llamar al tuyo como quieras.

Debería ver algo similar como punto de partida. Ahora comencemos a crear.

Paso 2: Vista de codificación

Vamos a crear un VStack simple y agregarle algunos modificadores de vista.

Además, es importante tener en cuenta que este VStack debe integrarse en otra vista de pila porque nuestra hoja inferior debe llenar toda la pantalla. Lo incrustaré en ZStack. Además, no olvidemos poner un fondo blanco en nuestro VStack.

Paso 3: Cree una variable vinculante en la vista principal y pásela a nuestra hoja inferior

Nuestra hoja inferior debe ser visible solo cuando se activa por alguna acción.
Entonces, agreguemos algo de código a nuestra hoja.

Al comienzo de View agregue la siguiente línea:

@Binding var isShowing: Bool

Paso 4: llame a nuestro BottomSheetView en la vista principal

Es importante mencionar que cualquier vista principal a la que desee llamar nuestra vista inferior debe tener ZStack como pila de vista raíz. Con la ayuda de ZStack, nuestra hoja inferior "anulará el contenido debajo de ella".

En ZStack, en su vista principal, simplemente llame a su BottomSheetView. Como puede recordar del Paso 3, debemos proporcionar algún valor vinculante a nuestro BottomSheetView. Por lo tanto, cree alguna variable vinculante al comienzo de la vista principal.

@State var isShowingBottomSheet: Bool = false

Button {
    isShowingBottomSheet = true
} label: {
    Text(“Show bottom sheet”)
}
.buttonStyle(.borderedProminent)

Como puede ver en la captura de pantalla anterior, nuestra hoja se ve horrible. Mejorémoslo.

En nuestro BottomSheetView ZStack arriba de VStack agregue el siguiente código

Color.black
    .opacity(0.3)
    .ignoresSafeArea()
    .onTapGesture {
        isShowing = false
    }

.animation(.easeInOut)

.transition(.move(edge: .bottom))

El uso es realmente simple, simplemente llámelo como ViewModifier regular y pase otro parámetro 'esquinas'. Vamos a agregarlo a nuestro código.

.cornerRadius(8, corners: [.topLeft, .topRight])

.frame(height: 250)

¡Y ahí lo tienes! Ahora puede crear cualquier tipo de hoja que desee para cualquier iOS compatible con SwiftUI y personalizarla a su gusto.
Hay mucho espacio para editar. Puede agregar un título y un botón de cierre en la parte superior.