Fogli personalizzati per SwiftUI

Mar 09 2023

Hai mai desiderato creare un foglio personalizzato con altezza dinamica in SwiftUI? Poiché Apple fornisce un componente Foglio nativo, è facile utilizzarlo per progettare qualsiasi tipo di foglio personalizzato di cui abbiamo bisogno nella nostra app iOS. Tuttavia, non è sempre stato così.

Tuttavia, non è sempre stato così. Le versioni precedenti di iOS, come iOS 14, non supportano questa funzionalità. Quindi, se la tua app supporta quelle versioni di iOS, non puoi permetterti il lusso di risolvere questo problema senza problemi. Ma non preoccuparti! Dopo aver letto questo articolo, sarai in grado di ottenere fogli con altezza dinamica in qualsiasi iOS che supporti SwiftUI! Facciamo un tentativo.

La creazione di fogli personalizzati non è affatto complicata. Segui i miei passi.

Passaggio 1: crea una nuova vista per il foglio inferiore

Per prima cosa dobbiamo creare un nuovo file SwiftUI View, quindi dividiamo il nostro codice in vari file. Ho chiamato il mio "BottomSheetView", puoi chiamare il tuo come preferisci.

Dovresti vedere qualcosa di simile come punto di partenza. Iniziamo ora a creare.

Passaggio 2: visualizzazione della codifica

Creiamo un semplice VStack e aggiungiamo alcuni modificatori di visualizzazione.

Inoltre, è importante notare che questo VStack deve essere incorporato in un'altra visualizzazione dello stack perché il nostro foglio inferiore deve riempire l'intero schermo. Lo incorporerò in ZStack. Inoltre, non dimentichiamo di mettere uno sfondo bianco sul nostro VStack.

Passaggio 3: crea la variabile di associazione nella vista principale e passala al nostro foglio inferiore

Il nostro foglio inferiore dovrebbe essere visibile solo quando attivato da qualche azione.
Quindi, aggiungiamo del codice al nostro foglio.

All'inizio di View aggiungi la seguente riga:

@Binding var isShowing: Bool

Passaggio 4: chiama il nostro BottomSheetView nella vista genitore

È importante ricordare che qualsiasi vista genitore in cui si desidera chiamare la nostra vista dal basso deve avere ZStack come stack della vista radice. Con l'aiuto di ZStack il nostro foglio inferiore "sovrascriverà il contenuto sottostante".

In ZStack, nella tua vista principale, chiama semplicemente BottomSheetView. Come puoi ricordare dal passaggio 3, dobbiamo fornire alcuni bool di associazione al nostro BottomSheetView. Quindi, crea una variabile di associazione all'inizio della vista principale.

@State var isShowingBottomSheet: Bool = false

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

Come puoi vedere nello screenshot qui sopra, il nostro foglio sembra orribile. Miglioriamolo.

Nel nostro BottomSheetView ZStack sopra il VStack aggiungi il seguente codice

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

.animation(.easeInOut)

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

L'utilizzo è davvero semplice, basta chiamarlo come ViewModifier regolare e passare un altro parametro 'angoli'. Aggiungiamolo al nostro codice.

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

.frame(height: 250)

E il gioco è fatto! Ora puoi creare qualsiasi tipo di foglio che desideri per qualsiasi iOS supportato da SwiftUI e personalizzarlo a tuo piacimento.
C'è molto spazio per modificare. Puoi aggiungere un titolo e un pulsante di chiusura in alto.

Voglio esprimere la mia gratitudine per tutta la mia conoscenza e aiutare con questa storia al solo e solo Dino Trnka ! Vai a controllare il suo mezzo .