Une question courante qui se pose lors de l’utilisation des vues de défilement dans SwiftUI est de savoir comment détecter la position de défilement. Avant la sortie de iOS17, les développeurs ont dû trouver leurs propres solutions pour capturer les positions de défilement. Cependant, la nouvelle version de SwiftUI a mis à jour ScrollView avec un nouveau modificateur appelé scrollPosition. Grâce à cette nouvelle fonctionnalité, les développeurs peuvent identifier sans effort l’élément qui défile.
Dans ce didacticiel, nous examinerons de plus près ce nouveau modificateur et examinerons comment il peut vous aider à détecter les positions de défilement dans les vues de défilement.
Utilisation du modificateur ScrollPosition pour détecter les positions de défilement
Commençons par une simple vue de défilement qui affiche une liste de 50 éléments.Le code est assez simple si vous savez implémenter une vue de défilement dans SwiftUI. Nous utilisons un ForEach boucle pour présenter 50 éléments de couleur, qui sont ensuite intégrés dans une vue de défilement vertical. Si vous ajoutez ce code à un projet SwiftUI, vous devriez pouvoir le prévisualiser et voir quelque chose de similaire à la figure ci-dessous.
Pour garder une trace de la position ou de l’élément de défilement actuel, vous devez d’abord déclarer une variable d’état pour conserver la position :
Ensuite, joignez le scrollPosition modificateur à la vue de défilement. Ce modificateur prend une liaison pour scrollIDqui stocke la position de défilement :
Enfin, joignez le scrollTargetLayout modificateur à la LazyVStack voir comme suit :
Pour observer les changements de position de défilement, vous pouvez joindre un onChange modificateur à la vue de défilement et imprimez l’ID de défilement sur la console :
Faites défiler vers le haut
Implémentons une autre fonctionnalité en utilisant le scrollPosition modificateur. Lorsqu’un utilisateur appuie sur l’une des vues couleur, la liste doit automatiquement revenir en haut.
Ceci peut être réalisé en ajoutant un onTapGesture modificateur à chaque vue de couleur, et en passant une fermeture qui définit le scrollID pour 0 à l’intérieur. Lorsque l’utilisateur appuie sur l’une des vues couleur, le scrollID sera mis à jour pour 0ce qui fera défiler la liste vers le haut.
|
|
Ajustement des marges de contenu des vues de défilement
Maintenant que vous savez comment détecter la position de défilement, discutons d’une autre nouvelle fonctionnalité des vues de défilement dans iOS 17. Tout d’abord, c’est le contentMargins modificateur. Il s’agit d’une nouvelle fonctionnalité de SwiftUI qui permet aux développeurs de personnaliser les marges des vues défilantes. Avec contentMarginsvous pouvez facilement ajuster la quantité d’espace entre le contenu et les bords de la vue de défilement, ce qui vous donne plus de contrôle sur la disposition de votre application.
Nous avons déjà utilisé ce modificateur dans l’exemple de code qui définit la marge horizontale sur 10 points.
Le .scrollContent La valeur du paramètre indique que la marge de contenu ne doit être appliquée qu’au contenu de défilement, plutôt qu’à l’ensemble de la vue de défilement. Si vous ne spécifiez pas les bords et les paramètres de placement, le contentMargins Le modificateur appliquera les marges à tous les bords de la vue de défilement. Par exemple, dans le code ci-dessous, il insère la vue de défilement entière de 50 points, y compris la barre de défilement.
Si vous souhaitez conserver la barre de défilement à sa position d’origine, vous pouvez définir le placement paramètre à .scrollContent.
Résumé
Le nouveau scrollPosition Le modificateur est l’une des fonctionnalités les plus attendues des vues de défilement. Dans iOS 17, SwiftUI introduit enfin cette fonctionnalité permettant aux développeurs de détecter les positions de défilement. Dans ce didacticiel, nous avons démontré l’utilisation de ce nouveau modificateur et introduit un autre nouveau modificateur appelé contentMarginsqui permet aux développeurs de personnaliser les marges des vues défilantes.
Grâce à ces nouvelles fonctionnalités de SwiftUI, les développeurs peuvent désormais créer sans effort des mises en page plus personnalisées et visuellement attrayantes pour leurs applications.
Si vous souhaitez en savoir plus sur SwiftUI, n’oubliez pas de consulter notre livre Mastering SwiftUI.
