Construire un compteur personnalisable dans SwiftUI – Meilleure programmation

Online Coding Courses for Kids

Supprimer tout dans le ContentView.swift fichier. Copiez et collez ensuite l’implémentation suivante dans le ContentView.swift fichier:

Dans le code ci-dessus, nous avons créé une vue LevelMeter et les vues MeterCell qu’elle contient. La vue LevelMeter est réutilisable et peut être personnalisée en modifiant le nombre de barres présentes et la valeur à laquelle elle est liée.

Construisez et exécutez-le ou prévisualisez-le simplement dans le canevas. Vous devriez pouvoir voir le mètre en action en ajustant le curseur. Lorsque le compteur atteint son maximum, vous verrez un texte s’animer par le haut. Vous pouvez facilement expérimenter l’animation en ajustant les valeurs dans le modificateur qui suit le texte («BOOM»):

.animation(.interpolatingSpring(stiffness: 100.0, damping: 5.0))

Avec SwiftUI, il est facile d’expérimenter avec de petits détails et de voir les résultats presque en temps réel dans le canevas. Cela peut réduire considérablement le temps de développement.

Pour ceux qui ne connaissent pas l’opérateur de correspondance de motifs de Swift (~=) appliqué aux plages, le colorForLower() la fonction peut être source de confusion.

le ~= L’opérateur nous fait simplement savoir si la plage contient la variable «inférieure» qui a été transmise à la fonction.

L’animation de serpentement est provoquée en changeant simplement la propriété d’alignement de la vue MeterCell lorsqu’elle est ajoutée au compteur dans LevelMeterView. L’animation se développe du côté aligné.

 .alignment: number.isMultiple(of: 2) ? .leading : .trailing)

Pour un effet différent, vous pouvez rendre toutes les MeterCells animées du même côté en changeant ce qui précède pour:

.alignment: .trailing

Des modifications très simples peuvent avoir des effets très importants. Les composants réutilisables nous permettent d’apporter des modifications importantes d’une manière presque aussi simple que de copier et coller. Par exemple, j’ai ajouté une deuxième barre de mètre, un curseur et une autre étiquette de texte. J’ai également changé la couleur de gamme inférieure en bleu. Cela a pris environ une minute. Il ressemble à ceci:

Le nouveau look

Close Menu