ButtonStyle em SwiftUI

O SwiftUI fornece uma maneira poderosa de criar e personalizar exibições usando protocolos de estilo. Esses protocolos nos permitem definir a aparência de nossas visualizações em uma única linha de código.

Como resultado, as visualizações são visualmente consistentes, tornando o aplicativo mais fácil de usar e mais atraente.

Estilizar botão sem ButtonStyle

Poderíamos estilizar nosso botão em linha aplicando diferentes modificadores a ele. Considere este exemplo:

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

Essa abordagem é totalmente adequada se você criar um único botão. Mas se você precisa desenvolver vários botões com o mesmo estilo, você precisa usar o ButtonStyleprotocolo. Isso ajudará a compartilhar e aplicar o mesmo estilo a diferentes botões no aplicativo.

Estilizando botão com ButtonStyle

Vamos criar nosso estilo de botão personalizado chamado PrimaryButtonStyle. Este é o estilo usado para botões primários em todo o aplicativo.

Vamos dar uma olhada neste exemplo:

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

Para aplicar o estilo de botão criado, tente escrever isto:

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

ButtonStyleConfiguration

O objeto de configuração do botão possui diversas propriedades, entre elas o isPressedvalor booleano, que indica se o botão está ou não sendo pressionado no momento. Poderíamos usar isso para alterar o estilo do botão quando um usuário toca em um botão. Para fazer isso, poderíamos escrever algo assim:

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

dica profissional

Nosso código pode ficar mais limpo e legível adicionando a seguinte extensão ao PrimaryButtonStyle:

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

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

Com ButtonStyle, podemos definir a aparência, o layout e as interações de um botão e garantir a consistência em todo o aplicativo.

Além disso, ele fornece uma maneira de encapsular a lógica e o estilo relacionados aos botões em componentes reutilizáveis. Isso torna a base de código mais sustentável e escalável.

Obrigado por ler!

Se você achar este artigo útil, certifique-se de bater palmas para que outras pessoas possam descobri-lo com mais facilidade.