SwiftUI Academy · Pelajaran

Pembaca ScrollView & Anchor

Gulir ke item tertentu secara terprogram.

Pembaca ScrollView & Anchor adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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. 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pembaca ScrollView & Anchor” gratis?

Ya — teks lengkap “Pembaca ScrollView & Anchor” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pembaca ScrollView & Anchor”?

Gulir ke item tertentu secara terprogram. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pembaca ScrollView & Anchor” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy