SwiftUI: cosa sono i ViewModifier?

SwiftUI sta rapidamente diventando la scelta popolare per creare app iOS e una delle cose più comuni che usi è ViewModifiers. Se hai lavorato con SwiftUI prima di leggere questo e non sai cosa sono i ViewModifiers, ti garantisco che li hai già usati senza rendertene conto.

I ViewModifiers sono metodi che chiami sulle viste che usi nella tua app per personalizzarne l'aspetto e il comportamento. Li usi per cambiare colori e dimensioni, per aggiungere gesti, per aggiungere opzioni di accessibilità ecc. Alle tue viste, se hai mai usato .backgroundo .foregroundColornel tuo progetto, questi sono esempi di ViewModifiers.

Come si usano i ViewModifiers?

Iniziamo creando un progetto, non ti annoierò con l'intero processo, quindi assicurati di selezionare SwiftUI invece di Storyboard quando crei il tuo progetto.

La visualizzazione predefinita creata per te utilizza già alcuni modificatori, quindi diamo un'occhiata

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: ti consente di specificare il riempimento per la tua vista, tieni presente che poiché non forniamo alcun valore, applica il riempimento predefinito del sistema per tutti i lati. Puoi specificare i bordi e i valori come questo .padding(.top, 12)o .padding(.horizontal, 12)per esempio
• .foregroundColor: imposterà il colore di primo piano per la vista, influenzando i colori del testo, le tinte, ecc

• .frame: Utilizzato per modificare le dimensioni di una vista
• .font: Utilizzato per modificare la famiglia di caratteri, le dimensioni, ecc. per aText

Prima di iniziare esaminiamo i vincoli che vogliamo utilizzare sul pulsante: riempimento, raggio dell'angolo, colore di sfondo.

Iniziamo aggiungendo un semplice pulsante con del testo:

Button(action: {
    // On click
}) {
    Text("Label")
}

Dopo aver aggiunto i nostri modificatori:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

L'esempio sopra è molto semplice ma se il tuo progetto ha molte viste con stili simili (valori di riempimento comuni, colori di sfondo a tema ecc.) Può diventare molto fastidioso molto rapidamente dover ripetere gli stessi modificatori. Fortunatamente SwiftUI ti consente di creare i tuoi modificatori personalizzati.

Consideriamo l'esempio sopra, se noti che il testo del pulsante non corrisponde esattamente a ciò che stavamo cercando di costruire. Creiamo un modificatore personalizzato per il testo del pulsante:

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()