SwiftUI : Que sont les ViewModifiers ?

SwiftUI devient rapidement le choix populaire pour créer des applications iOS, et l'une des choses les plus courantes que vous utilisez est ViewModifiers. Si vous avez travaillé avec SwiftUI avant de lire ceci et que vous ne savez pas ce que sont les ViewModifiers, je vous garantis que vous les avez déjà utilisés sans vous en rendre compte.

Les ViewModifiers sont des méthodes que vous appelez sur les vues que vous utilisez dans votre application pour personnaliser leur apparence et leur comportement. Vous les utilisez pour changer les couleurs et les tailles, pour ajouter des gestes, pour ajouter des options d'accessibilité, etc. à vos vues, si vous avez déjà utilisé .backgroundou .foregroundColordans votre projet, ce sont des exemples de ViewModifiers.

Comment utilisez-vous les ViewModifiers ?

Commençons par créer un projet, je ne vous ennuierai pas avec tout le processus, alors assurez-vous de sélectionner SwiftUI au lieu de Storyboard lors de la création de votre projet.

La vue par défaut créée pour vous utilise déjà certains modificateurs, alors jetons un coup d'œil à cela

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: vous permet de spécifier le rembourrage pour votre vue, notez que parce que nous ne fournissons aucune valeur, il applique le rembourrage par défaut du système pour tous les côtés. Vous pouvez spécifier les bords et les valeurs comme ceci .padding(.top, 12)ou .padding(.horizontal, 12)par exemple
• .foregroundColor: définira la couleur de premier plan pour la vue, affectant les couleurs du texte, les teintes, etc.

• .frame: Utilisé pour modifier la taille d'une vue
• .font: Utilisé pour changer la famille de police, la taille, etc.Text

Avant de commencer, passons en revue les contraintes que nous voulons utiliser sur le bouton — Padding, Corner radius, Background Color.

Commençons par ajouter un simple bouton avec du texte :

Button(action: {
    // On click
}) {
    Text("Label")
}

Après avoir ajouté nos modificateurs :

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

L'exemple ci-dessus est très simple mais si votre projet avait de nombreuses vues avec des styles similaires (valeurs de remplissage communes, couleurs d'arrière-plan thématiques, etc.), cela peut devenir très ennuyeux très rapidement de devoir répéter les mêmes modificateurs. Heureusement, SwiftUI vous permet de créer vos propres modificateurs personnalisés.

Prenons l'exemple ci-dessus, si vous remarquez que le texte du bouton ne correspond pas exactement à ce que nous essayons de construire. Créons un modificateur personnalisé pour le texte du bouton :

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()