ButtonStyle w SwiftUI

SwiftUI zapewnia potężny sposób tworzenia i dostosowywania widoków za pomocą protokołów stylizacji. Protokoły te pozwalają nam zdefiniować wygląd i sposób działania naszych widoków w jednym wierszu kodu.

Dzięki temu widoki są spójne wizualnie, dzięki czemu aplikacja jest łatwiejsza w obsłudze i bardziej atrakcyjna.

Guzik do stylizacji bez ButtonStyle

Możemy stylizować nasz przycisk w linii, stosując do niego różne modyfikatory. Rozważ ten przykład:

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

Takie podejście jest całkowicie w porządku, jeśli zaprojektujesz pojedynczy przycisk. Ale jeśli chcesz opracować wiele przycisków w tym samym stylu, musisz użyć protokołu ButtonStyle. Pomoże to udostępniać i stosować ten sam styl do różnych przycisków w całej aplikacji.

Guzik do stylizacji z ButtonStyle

Stwórzmy nasz niestandardowy styl przycisku o nazwie PrimaryButtonStyle. Jest to styl używany dla głównych przycisków w całej aplikacji.

Spójrzmy na ten przykład:

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

Aby zastosować utworzony styl przycisku, spróbuj napisać to:

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

Konfiguracja stylu przycisku

Obiekt konfiguracyjny przycisku ma kilka właściwości, w tym isPressedwartość logiczną, która wskazuje, czy przycisk jest aktualnie wciśnięty. Moglibyśmy użyć tego do zmiany stylu naszego przycisku, gdy użytkownik dotknie przycisku. Aby to zrobić, moglibyśmy napisać coś takiego:

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

Pro wskazówka

Nasz kod można uczynić czystszym i bardziej czytelnym, dodając następujące rozszerzenie do PrimaryButtonStyle:

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

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

Za pomocą programu ButtonStylemożemy zdefiniować wygląd, układ i interakcje przycisku oraz zapewnić spójność w całej aplikacji.

Ponadto zapewnia sposób na hermetyzację logiki i stylu związanego z przyciskami w komponenty wielokrotnego użytku. Dzięki temu baza kodu jest łatwiejsza w utrzymaniu i skalowalna.

Dziękuje za przeczytanie!

Jeśli uznasz ten artykuł za pomocny, pochwal go, aby inni mogli go łatwiej odkryć.