ButtonStyle in SwiftUI

SwiftUI bietet eine leistungsstarke Möglichkeit zum Erstellen und Anpassen von Ansichten mithilfe von Styling-Protokollen. Mit diesen Protokollen können wir das Erscheinungsbild unserer Ansichten in einer einzigen Codezeile definieren.

Dadurch sind die Ansichten optisch konsistent, was die App benutzerfreundlicher und attraktiver macht.

Styling-Button ohne ButtonStyle

Wir könnten unsere Schaltfläche inline gestalten, indem wir verschiedene Modifikatoren darauf anwenden. Betrachten Sie dieses Beispiel:

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

Dieser Ansatz ist völlig in Ordnung, wenn Sie eine einzelne Schaltfläche entwerfen. Wenn Sie jedoch mehrere Schaltflächen mit demselben Stil entwickeln müssen, müssen Sie das ButtonStyleProtokoll verwenden. Es hilft dabei, den gleichen Stil zu teilen und auf verschiedene Schaltflächen in der App anzuwenden.

Styling-Schaltfläche mit ButtonStyle

Lassen Sie uns unseren benutzerdefinierten Schaltflächenstil mit dem Namen erstellen PrimaryButtonStyle. Dies ist der Stil, der für die Hauptschaltflächen in der gesamten Anwendung verwendet wird.

Schauen wir uns dieses Beispiel an:

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)
    }
}

Um den erstellten Schaltflächenstil anzuwenden, schreiben Sie Folgendes:

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

ButtonStyleConfiguration

Das Konfigurationsobjekt der Schaltfläche verfügt über mehrere Eigenschaften, einschließlich des isPressedbooleschen Werts, der angibt, ob die Schaltfläche gerade gedrückt wird oder nicht. Damit könnten wir den Stil unserer Schaltflächen ändern, wenn ein Benutzer auf eine Schaltfläche tippt. Dazu könnten wir etwa Folgendes schreiben:

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)
    }
}

Profi-Tipp

Unser Code kann sauberer und lesbarer gemacht werden, indem die folgende Erweiterung hinzugefügt wird PrimaryButtonStyle:

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

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

Mit ButtonStylekönnen wir das Erscheinungsbild, das Layout und die Interaktionen einer Schaltfläche definieren und die Konsistenz in der gesamten Anwendung sicherstellen.

Darüber hinaus bietet es eine Möglichkeit, schaltflächenbezogene Logik und Stil in wiederverwendbaren Komponenten zu kapseln. Dies macht die Codebasis wartbarer und skalierbarer.

Danke fürs Lesen!

Wenn Sie diesen Artikel hilfreich finden, lesen Sie ihn unbedingt, damit andere ihn leichter entdecken können.