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.

Read My Stories

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

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps