0Pricing
SwiftUI Academy · Урок

ScrollView Reader и якоря

Программно прокручивайте список к определённым элементам.

«ScrollView Reader и якоря» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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

Часто задаваемые вопросы

Урок «ScrollView Reader и якоря» бесплатный?

Да — полный текст урока «ScrollView Reader и якоря» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.

Чему я научусь в уроке «ScrollView Reader и якоря»?

Программно прокручивайте список к определённым элементам. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать SwiftUI Academy?

Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «ScrollView Reader и якоря»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке SwiftUI Academy?

Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Горизонтальный и вертикальный ScrollView
  2. LazyVStack и LazyHStack
  3. Адаптивные сетки с LazyVGrid
  4. ScrollView Reader и якоря
← Назад к SwiftUI Academy