SwiftUI Academy · Leçon

Lecteur de ScrollView et ancres

Faites défiler automatiquement jusqu’à des éléments précis.

Lecteur de ScrollView et ancres est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Jumping to Content

Sometimes you need to scroll to a specific item in code, like a Back to Top button. ScrollViewReader makes that possible. 🎯

Wrap the ScrollView

Place a ScrollViewReader around your ScrollView; it hands you a proxy you use to control scrolling.

ScrollViewReader { proxy in
    ScrollView {
        Content()
    }
}

Tag Each Item

Give scrollable items a unique id so the reader knows exactly where to jump when you ask it to.

ForEach(items) { item in
    Row(item).id(item.id)
}

Call scrollTo

The proxy has one key method: scrollTo. Pass an id and the ScrollView glides that item into view.

proxy.scrollTo(42)

Animate the Jump

Wrap the call in withAnimation so the scroll glides smoothly instead of snapping instantly to the target.

withAnimation {
    proxy.scrollTo(42)
}

Anchor the Position

The anchor argument decides where the item lands: .top pins it to the top, .center to the middle.

proxy.scrollTo(42, anchor: .top)

Back to Top Button

A common pattern is a button that calls scrollTo on the first item id to whisk the user back up.

Button("Top") {
    proxy.scrollTo(firstID, anchor: .top)
}

Jump on Appear

Call scrollTo inside onAppear to open a long list already scrolled to the user latest unread row.

.onAppear {
    proxy.scrollTo(lastReadID)
}

IDs Must Match

If scrollTo does nothing, check that the id you pass exactly matches an id set on a visible item.

Pair with State

Trigger scrolling from a @State change, like a search result selection, to guide the user automatically.

onChange(of: selected) { id in
    proxy.scrollTo(id)
}

Effortless Navigation

With ScrollViewReader and anchors, long screens feel navigable and friendly instead of an endless swipe. ✨

Quick Check

Think about how you move to a specific row.

Recap

You learned to use ScrollViewReader, tag items with ids, and call scrollTo with anchors to jump anywhere in code. 🎉

Questions Fréquemment Posées

La leçon « Lecteur de ScrollView et ancres » est-elle gratuite ?

Oui — le texte complet de « Lecteur de ScrollView et ancres » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Lecteur de ScrollView et ancres » ?

Faites défiler automatiquement jusqu’à des éléments précis. Tu pratiques SwiftUI Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer SwiftUI Academy ?

Aucune expérience préalable n'est requise. SwiftUI Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Lecteur de ScrollView et ancres » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon SwiftUI Academy ?

Oui. Chaque leçon SwiftUI Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à SwiftUI Academy