Salut les gars, Dans cet article, nous verrons comment créer une SnapList bidirectionnelle. La création d'une seule liste d' accrochages directionnels est devenue plus facile car nous avons « PageTabViewStyle » dans TabView.

Mais la mise en œuvre de deux listes d'accrochage directionnelles est toujours un défi car TabView horizontal à l'intérieur d'un TabView vertical " .rotation(.degree(90))" peut créer des bugs de défilement étranges.

Nous utiliserons donc le même TabView pour le défilement horizontal, mais nous les ajouterons dans un ScrollView vertical et créerons un comportement d'accrochage personnalisé à la cellule ScrollView.

Il existe d'autres méthodes telles que la création d'un modificateur VStack et l'ajustement de son décalage en fonction de DragGesture, mais cette méthode crée également des problèmes car TabView contient par défaut le défilement vertical. La méthode ci-dessous utilisant ScrollView supprime le comportement de défilement de TabView.

Vous pouvez trouver le code en résumé sur GitHub .

Étape 1

• Créez un nouveau projet SwiftUI.
• Créez une cellule TabView horizontale. Cela ressemblera à quelque chose comme ça

• Ajoutez ForEach pour générer des TabViews verticaux dans la vue parent et les envelopper dans un ScrollView devrait obtenir le comportement attendu du défilement horizontal et vertical, sauf que le défilement vertical ne s'accroche pas et se déroule librement.
• Dans les étapes suivantes, nous ajouterons le comportement Snap au défilement vertical, mais à ce stade, le code de la vue parent ressemblera à ceci 👇🏻

• Dans cette étape, nous allons ajouter une méthode à la ScrollView à travers laquelle nous pouvons savoir qu'elle est décalée lors du défilement.
• Ajoutez une " PreferenceKey ", ". coordonnéEspace ", " .background (touche de préférence de couleur) " et " . onPreferenceChange ”. Cela nous aidera à connaître le changement de décalage de ScrollView.
• Nous ajouterons ce nom " .coordinateSpace " à ScrollView et d'autres méthodes au " LazyVStack " , après quoi notre code ressemblera à ceci👇🏻

• Après avoir ajouté cela, votre code imprimera le décalage ScrollView chaque fois que vous faites défiler.

• Maintenant, nous allons utiliser combiner pour ajouter un éditeur et un détecteur pour savoir quand le ScrollView arrête de défiler, afin que nous puissions Snap la vue.
• Ajoutez le code ci-dessous pour initialiser l'éditeur et le détecteur. Lorsque la préférence de défilement change, appelez " detect.send(value) " au lieu de la méthode " print " précédente .
• Maintenant, écoutez l'éditeur via ". onReceive ", où il passera le décalage de défilement à la fin du défilement.

• Ajoutez la méthode de détection dans ViewModel car il s'agit d'une fonction « mutante ».

• Maintenant que nous avons le décalage de défilement après la fin du défilement, prenons la vue.
• Nous devons diviser le décalage de fin de défilement avec la hauteur statique TabViewCell pour obtenir l'index actuel.
• Avant d'appeler ScrollViewReader ". scrollTo ”, nous devons également vérifier si l'index suivant est proche, ou la vue s'alignera toujours sur l'index actuel jusqu'à ce qu'il soit complètement balayé.
• N'oubliez pas non plus d'ajouter " .id " aux cellules de votre ScrollView afin qu'il puisse défiler jusqu'à l'index.

Vous pouvez trouver le code en résumé sur GitHub .

Faites-moi part de vos réflexions et suggestions. Vous pouvez me trouver sur Twitter .