Style de bouton dans SwiftUI

SwiftUI fournit un moyen puissant de créer et de personnaliser des vues à l'aide de protocoles de style. Ces protocoles nous permettent de définir l'apparence de nos vues en une seule ligne de code.

En conséquence, les vues sont visuellement cohérentes, ce qui rend l'application plus facile à utiliser et plus attrayante.

Bouton de style sans ButtonStyle

Nous pourrions styliser notre bouton en ligne en lui appliquant différents modificateurs. Considérez cet exemple :

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

Cette approche convient parfaitement si vous concevez un seul bouton. Mais si vous avez besoin de développer plusieurs boutons avec le même style, vous devez utiliser le ButtonStyleprotocole. Cela vous aidera à partager et à appliquer le même style à différents boutons de l'application.

Bouton de style avec ButtonStyle

Créons notre style de bouton personnalisé nommé PrimaryButtonStyle. Il s'agit du style utilisé pour les boutons principaux de l'application.

Jetons un œil à cet exemple :

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

Pour appliquer le style de bouton créé, essayez d'écrire ceci :

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

Configuration du style de bouton

L'objet de configuration du bouton possède plusieurs propriétés, dont la isPressedvaleur booléenne, qui indique si le bouton est actuellement enfoncé ou non. Nous pourrions l'utiliser pour changer notre style de bouton lorsqu'un utilisateur appuie sur un bouton. Pour ce faire, nous pourrions écrire quelque chose comme ceci :

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

Conseil de pro

Notre code peut être rendu plus propre et plus lisible en ajoutant l'extension suivante au PrimaryButtonStyle:

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

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

Avec ButtonStyle, nous pouvons définir l'apparence, la disposition et les interactions d'un bouton et assurer la cohérence de l'ensemble de l'application.

En outre, il fournit un moyen d'encapsuler la logique et le style liés aux boutons dans des composants réutilisables. Cela rend la base de code plus maintenable et évolutive.

Merci d'avoir lu!

Si vous trouvez cet article utile, assurez-vous de lui donner un coup de main pour que les autres puissent le découvrir plus facilement.