La possibilité de créer des modificateurs de vue personnalisés est une fonctionnalité puissante de SwiftUI. Dans cet article, nous couvrirons des exemples de la façon dont cette fonctionnalité peut être utilisée pour rendre la création de l'interface utilisateur beaucoup plus facile. Si vous n'êtes pas familier avec les ViewModifiers dans et comment en créer des personnalisés, vous pouvez en savoir plus ici SwiftUI Le but de cet article est de couvrir certaines des différentes façons de créer des modificateurs et des styles personnalisés dans SwiftUI et comment ils peuvent être utilisés pour rendre la construction de l'interface utilisateur plus déclarative tout en obtenant une sortie finale propre et cohérente. L'interface utilisateur finale que nous voulons créer est la suivante : Considérons tous les composants individuels à l'écran : Image : un composant d'image standard avec un certain rayon d'angle Textes : Nous avons un titre et un corps de texte Bouton : un bouton pleine largeur Code SwiftUI simple Si vous créez cet écran sans aucun modificateur, le code ressemblera à ceci : struct ContentView: View { var body: some View { VStack (alignment: .leading) { Image("feature") .resizable() .aspectRatio(contentMode: .fill) .frame(minWidth: 0, maxWidth: .infinity) .frame(height: 220) .cornerRadius(12) .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI are the best!") .foregroundColor(Color("titleTextColor")) .font(.system(size: 20, weight: .bold)) .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views") .foregroundColor(Color("bodyTextColor")) .font(.system(size: 14, weight: .medium)) Spacer() Button(action: { }) { Text("Label") .font(.system(size: 14, weight: .medium)) } .frame(minWidth: 0, maxWidth: .infinity) .padding(.horizontal, 10) .padding(.vertical, 12) .background(Color.blue) .foregroundColor(Color.white) .cornerRadius(12) } .padding(.all, 16) } } Il y a quelques problèmes avec cette approche : Le style de certains éléments (le texte du titre et des détails par exemple) devrait être dupliqué Des modifications à certains des styles courants (remplissage d'élément, rayon d'angle, etc.) devraient être apportées à plusieurs endroits Maintenant, vous pouvez résoudre ce problème à la manière UIKit en créant des vues personnalisées, mais je ne suis pas fan de cette approche car elle impliquait de s'éloigner des vues intégrées et rend l'intégration de nouveaux membres de l'équipe plus frictionnelle. Un moyen plus simple serait de définir des modificateurs de vue universels pouvant être appliqués à la place des styles eux-mêmes. Décomposons le style commun dont nous avons besoin : Conteneur d'écran : l'écran lui-même a un rembourrage universel, ceci est facultatif mais je préfère que tous les écrans aient un style universel Rayon d'angle Titre et corps du texte Pleine largeur : les éléments doivent pouvoir remplir la largeur de leur parent (le bouton et l'image dans l'exemple ci-dessus) Style de bouton Mise à l'échelle des images Modificateurs d'affichage personnalisés Commençons par le rayon du coin : struct CommonCornerRadius: ViewModifier { func body(content: Content) -> some View { content .cornerRadius(12) } } Celui-ci est assez simple, il nous permet d'appliquer un rayon de coin universel pour les éléments. Cela facilite la modification globale des styles d'application sans avoir à créer des vues personnalisées ou à effectuer plusieurs modifications dans la base de code. struct FullWidthModifier: ViewModifier { func body(content: Content) -> some View { content .frame(minWidth: 0, maxWidth: .infinity) } } Celui-ci facilite la mise en œuvre des vues pleine largeur, plus besoin d'ajouter manuellement ! .frame struct TitleTextModifier: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Color("titleTextColor")) .font(.system(size: 20, weight: .bold)) } } struct BodyTextModifier: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Color("bodyTextColor")) .font(.system(size: 14, weight: .medium)) } } Cela permettra un style de texte commun, normalement vous créerez des composants de texte personnalisés ou des fonctions utilitaires et ajouterez des composants d'interface utilisateur via le code. extension Image { func aspectFill() -> some View { self .resizable() .aspectRatio(contentMode: .fill) } } D'accord, vous m'avez compris… ce n'est pas un modificateur de vue personnalisé mais une simple extension. En effet, ViewModifiers s'applique aux vues génériques et certaines fonctions telles que ne s'appliquent qu'aux images, l'utilisation d'une combinaison d'extensions et de modificateurs personnalisés permet de contourner ce problème. resizable struct FullWidthButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .fullWidth() .foregroundColor(Color.white) .font(.system(size: 14, weight: .medium)) .padding(.horizontal, 10) .padding(.vertical, 12) .background(configuration.isPressed ? Color.blue.opacity(0.2) : Color.blue) } } struct FullWidthButton: ViewModifier { func body(content: Content) -> some View { content .buttonStyle(FullWidthButtonStyle()) } } Enfin, c'est pour le bouton, notez que même si nous aurions pu simplement créer un ViewModifier pour obtenir le même effet, l'apparence du bouton n'aurait pas changé lorsqu'il aurait été tapé. En effet, la définition de sur un bouton l'oblige à utiliser cet arrière-plan dans les états activé et non activé. nous permet de modifier l'opacité du bouton selon qu'il est enfoncé ou non. .background ButtonStyle Maintenant, pour plus de commodité, j'aime créer des extensions qui utilisent ces modificateurs : extension View { func commonCornerRadius() -> some View { modifier(CommonCornerRadius()) } func fullWidth() -> some View { modifier(FullWidthModifier()) } func title() -> some View { modifier(TitleTextModifier()) } func body() -> some View { modifier(BodyTextModifier()) } func fullWidthButton() -> some View { modifier(FullWidthButton()) } } extension Image { func aspectFill() -> some View { self .resizable() .aspectRatio(contentMode: .fill) } } Convertissons maintenant le code pour les utiliser au lieu de les styliser directement : struct ContentView: View { var body: some View { VStack (alignment: .leading) { Image("feature") .aspectFill() .fullWidth() .frame(height: 220) .commonCornerRadius() .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI are the best!") .title() .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views") .body() Spacer() Button(action: { }) { Text("Awesome") } .fullWidthButton() .commonCornerRadius() } .padding(.all, 16) } } Beaucoup plus propre ! Maintenant, à première vue, cela ressemble à plus de code et d'efforts que de simplement définir manuellement les styles, mais à long terme, cela économisera beaucoup d'efforts. Personnellement, cette approche encourage également le style de votre application à être plus cohérent en s'appuyant davantage sur des modificateurs courants que sur une base de style vue par vue. Et c'est tout ! Espérons que cela vous aide à créer vos applications plus rapidement et plus facilement, un autre avantage est que ces modificateurs peuvent être déposés dans n'importe laquelle de vos applications et modifiés pour correspondre à ses directives de style. J'ai également travaillé sur une bibliothèque pour aller encore plus loin, vous pouvez la consulter (PS : Au moment d'écrire ces lignes, la bibliothèque est à un stade très précoce, le référentiel est vide : p mais restez à l'écoute) ici Également publié ici.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

Un guide essentiel de SwiftUI : interface utilisateur réutilisable avec des modificateurs personnalisés

Trop long; Pour lire

Nemi Shah

STORY’S CREDIBILITY

Code License

Guide

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Un guide essentiel de SwiftUI : interface utilisateur réutilisable avec des modificateurs personnalisés

Trop long; Pour lire

Nemi Shah

STORY’S CREDIBILITY

Code License

Guide

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES