ButtonStyle in SwiftUI

SwiftUI offre un modo efficace per creare e personalizzare le viste utilizzando i protocolli di stile. Questi protocolli ci consentono di definire l'aspetto delle nostre viste in una singola riga di codice.

Di conseguenza, le visualizzazioni sono visivamente coerenti, rendendo l'app più facile da usare e più attraente.

Pulsante di styling senza ButtonStyle

Potremmo modellare il nostro pulsante in linea applicandogli diversi modificatori. Considera questo esempio:

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

Questo approccio va benissimo se progetti un singolo pulsante. Ma se hai bisogno di sviluppare più pulsanti con lo stesso stile devi usare il ButtonStyleprotocollo. Aiuterà a condividere e applicare lo stesso stile a diversi pulsanti nell'app.

Pulsante di stile con ButtonStyle

Creiamo il nostro stile di pulsante personalizzato denominato PrimaryButtonStyle. Questo è lo stile utilizzato per i pulsanti principali in tutta l'applicazione.

Diamo un'occhiata a questo esempio:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

Per applicare lo stile del pulsante creato prova a scrivere questo:

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

ButtonStyleConfiguration

L'oggetto di configurazione del pulsante ha diverse proprietà, incluso il isPressedvalore booleano, che indica se il pulsante è attualmente premuto o meno. Potremmo usarlo per cambiare lo stile del nostro pulsante quando un utente tocca un pulsante. Per farlo, potremmo scrivere qualcosa del genere:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

Suggerimento professionale

Il nostro codice può essere reso più pulito e leggibile aggiungendo la seguente estensione a PrimaryButtonStyle:

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

Con ButtonStyle, possiamo definire l'aspetto, il layout e le interazioni di un pulsante e garantire la coerenza nell'intera applicazione.

Inoltre, fornisce un modo per incapsulare la logica e lo stile relativi ai pulsanti in componenti riutilizzabili. Ciò rende la base di codice più gestibile e scalabile.

Grazie per aver letto!

Se trovi utile questo articolo, assicurati di dargli un applauso in modo che altri possano scoprirlo più facilmente.