Связи вложенной прокрутки
Согласовывайте прокрутку между контейнерами.
«Связи вложенной прокрутки» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Scrolls Inside Scrolls
Sometimes a scrollable sits inside another scrollable, like a list under a collapsing header. Nested scroll lets them cooperate instead of fighting. 📜
The Coordination Problem
Without help, the inner list eats every swipe and the outer container never moves. NestedScrollConnection shares the scroll between them.
Meet nestedScroll
Attach the nestedScroll modifier and pass a connection. That connection intercepts scroll deltas as they travel up the tree.
Modifier.nestedScroll(connection)Pre-Scroll: First Dibs
The parent gets a chance before the child via onPreScroll. Return how much of the delta you consumed; the rest flows to the child.
override fun onPreScroll(available: Offset, source): OffsetPost-Scroll: Leftovers
After the child scrolls, onPostScroll offers any unused delta back to the parent. Use it to move a header once the list hits its edge.
override fun onPostScroll(consumed, available, source): OffsetConsume What You Need
In each callback you return an Offset of how much you used. Return Offset.Zero to pass everything through to the next participant.
return Offset(0f, consumedY)Fling Phases Too
There are matching onPreFling and onPostFling callbacks for momentum. They are suspend functions so you can animate as the fling resolves.
override suspend fun onPreFling(available: Velocity): VelocityRemember the Connection
Wrap your connection in remember so it survives recomposition. Capture any state it reads, like a header offset, inside it.
val connection = remember { object : NestedScrollConnection {...} }Collapsing Toolbar Classic
The flagship use is a collapsing toolbar: shrink the top bar with pre-scroll while the list scrolls, then expand it on the way back.
It Just Works Often
Many built-ins like Scaffold with scroll behaviors already wire nested scroll for you. Reach for a custom connection only when you need fine control.
Mind the Source
Each callback gets a source telling you if the scroll came from a drag or a fling. Use it to react differently to touch versus momentum.
if (source == NestedScrollSource.Drag) { /* ... */ }Quick Check
Which callback lets a parent consume scroll before its child does?
Recap: Scrolls in Harmony
You learned NestedScrollConnection with pre and post scroll and fling, the key to collapsing toolbars and cooperating lists. 🎉
Часто задаваемые вопросы
Урок «Связи вложенной прокрутки» бесплатный?
Да — полный текст урока «Связи вложенной прокрутки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Связи вложенной прокрутки»?
Согласовывайте прокрутку между контейнерами. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Связи вложенной прокрутки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- pointerInput и detectTapGestures
- Перетаскивание, смахивание и бросок
- Преобразования: панорамирование, масштабирование и поворот
- Связи вложенной прокрутки