Перетаскивание, смахивание и бросок
Отслеживайте движение и инерцию.
«Перетаскивание, смахивание и бросок» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Following the Finger
Dragging means tracking how far a finger moves and updating the UI to match. Compose makes this smooth with dedicated drag detectors. ✋
Detect Drag Gestures
Inside pointerInput, call detectDragGestures. Its onDrag lambda fires repeatedly with the change and the distance moved since the last event.
detectDragGestures { change, drag -> /* move */ }Accumulate the Offset
Keep a state Offset and add each drag delta to it. Then feed that offset into a Modifier so the element follows your finger.
var offset by remember { mutableStateOf(Offset.Zero) }
offset += dragApply with offset Modifier
Use the offset modifier to move a composable by your tracked pixels. Convert with roundToInt so it positions cleanly on screen.
Modifier.offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }Consume the Change
Call change.consume() in your drag handler. This tells parents you handled the event so they do not also react to it.
detectDragGestures { change, drag -> change.consume() }Limit to One Axis
Need only sideways motion? Use detectHorizontalDragGestures, or detectVerticalDragGestures for up and down. They report a single Float delta.
detectHorizontalDragGestures { _, dx -> x += dx }Swipe to Dismiss
A swipe is just a drag you judge at the end. If the finger traveled far enough, treat it as a dismiss instead of snapping back.
The High-Level draggable
For simple single-axis dragging, the draggable modifier is easier. Pair it with rememberDraggableState to collect the delta.
Modifier.draggable(state, orientation = Orientation.Horizontal)Fling Needs Velocity
A fling keeps moving after release based on speed. Track velocity with a VelocityTracker as the finger moves to capture that momentum.
val tracker = VelocityTracker()Animate the Decay
Feed the release velocity into an Animatable with a decay spec. It glides to a natural stop, mimicking real physics. 🌀
animatable.animateDecay(velocity, exponentialDecay())Know When It Ends
detectDragGestures also gives you onDragEnd and onDragCancel. Use them to snap back, settle, or kick off your fling animation.
detectDragGestures(onDragEnd = { /* fling here */ }) {...}Quick Check
What does a fling animation need that a plain drag does not?
Recap: Move with Momentum
You tracked drags with detectDragGestures, accumulated an offset, judged swipes, and used velocity for a fling. Touch now feels alive. 🎉
Часто задаваемые вопросы
Урок «Перетаскивание, смахивание и бросок» бесплатный?
Да — полный текст урока «Перетаскивание, смахивание и бросок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Перетаскивание, смахивание и бросок»?
Отслеживайте движение и инерцию. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Перетаскивание, смахивание и бросок»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- pointerInput и detectTapGestures
- Перетаскивание, смахивание и бросок
- Преобразования: панорамирование, масштабирование и поворот
- Связи вложенной прокрутки