Android Compose 框架的列表与集合模块之滑动删除与拖拽深入分析(四十八) ...

Android Compose 框架的列表与集合模块之滑动删除与拖拽深入分析

一、引言

本人掘金号，接待点击关注：https://juejin.cn/user/4406498335701950

1.1 Android Compose 简介

在 Android 开辟范畴，界面的交互性和用户体验至关重要。传统的 Android 开辟方式在构建复杂界面和实现流畅交互时存在肯定的范围性。而 Android Compose 作为 Google 推出的声明式 UI 工具包，为开辟者带来了全新的开辟体验。它基于 Kotlin 语言，采用声明式编程范式，使得开辟者能够以简洁、高效的方式构建 UI，并且更轻易实现复杂的交互结果。
1.2 滑动删除与拖拽在列表中的重要性

在 Android 应用中，列表是一种常见的 UI 组件，用于展示大量的数据。滑动删除和拖拽功能可以极大地提升用户对列表数据的操作便捷性和交互体验。滑动删除允许用户通过简朴的滑动手势快速删除列表中的某一项数据，而拖拽功能则可以让用户重新分列列表项的次序。这些功能在许多应用场景中都非常实用，如待办事项列表、文件管理列表等。
1.3 本文的目标

本文将深入分析 Android Compose 框架的列表与集合模块中滑动删除与拖拽功能的实现原理和源码。通过详细的代码示例和源码分析，帮助开辟者明白怎样在 Android Compose 中实现这些功能，并且能够根据现实需求举行定制和扩展。
二、滑动删除功能实现

2.1 根本思绪

实现滑动删除功能的根本思绪是监听列表项的滑动手势，当滑动距离达到肯定阈值时，执行删除操作。在 Android Compose 中，可以通过 Modifier.pointerInput 来监听手势事件，结合 Animatable 实现滑动动画结果。
2.2 简朴示例代码

kotlin

1. import androidx.compose.animation.core.Animatable
2. import androidx.compose.animation.core.AnimationVector1D
3. import androidx.compose.animation.core.tween
4. import androidx.compose.foundation.gestures.detectHorizontalDragGestures
5. import androidx.compose.foundation.layout.*
6. import androidx.compose.material.*
7. import androidx.compose.runtime.*
8. import androidx.compose.ui.Modifier
9. import androidx.compose.ui.graphics.Color
10. import androidx.compose.ui.input.pointer.pointerInput
11. import androidx.compose.ui.unit.Dp
12. import androidx.compose.ui.unit.dp
14. // 定义一个可组合函数，用于展示包含滑动删除功能的列表
15. @Composable
16. fun SwipeToDeleteList() {
17.     // 使用 mutableStateOf 创建一个可变的列表，用于存储列表项数据
18.     var items by remember { mutableStateOf((1..10).map { "Item $it" }.toList()) }
20.     Column(
21.         modifier = Modifier
22.            .fillMaxSize()
23.            .padding(16.dp)
24.     ) {
25.         // 遍历列表中的每一项
26.         items.forEachIndexed { index, item ->
27.             // 为每个列表项创建一个可动画化的偏移量对象，初始值为 0.dp
28.             val offsetX = remember { Animatable(0f) }
30.             // 创建一个 Card 组件作为列表项的容器
31.             Card(
32.                 modifier = Modifier
33.                    .fillMaxWidth()
34.                    .padding(vertical = 4.dp)
35.                    .pointerInput(Unit) {
36.                         // 监听水平滑动手势
37.                         detectHorizontalDragGestures(
38.                             onDrag = { change, dragAmount ->
39.                                 // 更新偏移量，限制偏移量在 -200.dp 到 0.dp 之间
40.                                 val newOffset = offsetX.value + dragAmount.x
41.                                 offsetX.snapTo(newOffset.coerceIn(-200f, 0f))
42.                                 // 标记手势事件已被消费
43.                                 change.consume()
44.                             },
45.                             onDragEnd = {
46.                                 // 当滑动结束时，判断偏移量是否超过 -100.dp
47.                                 if (offsetX.value < -100f) {
48.                                     // 如果超过 -100.dp，执行删除操作
49.                                     items = items.toMutableList().apply { removeAt(index) }
50.                                 } else {
51.                                     // 否则，将偏移量动画回 0.dp
52.                                     launch {
53.                                         offsetX.animateTo(
54.                                             targetValue = 0f,
55.                                             animationSpec = tween(durationMillis = 200)
56.                                         )
57.                                     }
58.                                 }
59.                             }
60.                         )
61.                     }
62.                    .offset {
63.                         // 将偏移量应用到列表项上
64.                         IntOffset(offsetX.value.toInt(), 0)
65.                     }
66.             ) {
67.                 // 在 Card 中显示列表项的文本
68.                 Text(
69.                     text = item,
70.                     modifier = Modifier.padding(16.dp)
71.                 )
72.             }
73.         }
74.     }
75. }

复制代码

2.3 代码表明

• 状态管理：使用 mutableStateOf 创建一个可变的列表 items，用于存储列表项的数据。当用户执行删除操作时，更新这个列表。
  
• 手势监听：使用 Modifier.pointerInput 和 detectHorizontalDragGestures 监听列表项的程度滑动手势。在 onDrag 回调中，更新 offsetX 的值，并限定其范围在 -200.dp 到 0.dp 之间。在 onDragEnd 回调中，根据偏移量的值决定是执行删除操作还是将列表项动画回原来的位置。
  
• 动画结果：使用 Animatable 实现列表项的滑动动画。在 onDragEnd 回调中，假如偏移量没有高出 -100.dp，使用 animateTo 方法将 offsetX 动画回 0.dp。
  

2.4 源码分析

Animatable 源码分析

Animatable 是 Android Compose 中用于实现动画的核心类之一。它的主要作用是管理动画的状态和执行动画。以下是 Animatable 的简化源码分析：
kotlin

1. class Animatable<T, V : AnimationVector>(
2.     initialValue: T,
3.     val typeConverter: TwoWayConverter<T, V>
4. ) {
5.     // 当前动画的值
6.     private var _value: T = initialValue
7.     // 动画的状态
8.     private var animationState: AnimationState<T, V> = AnimationState(initialValue, typeConverter)
10.     // 获取当前动画的值
11.     val value: T
12.         get() = _value
14.     // 立即将动画的值设置为指定的值
15.     fun snapTo(targetValue: T) {
16.         _value = targetValue
17.         animationState = AnimationState(targetValue, typeConverter)
18.     }
20.     // 启动动画，将动画的值从当前值过渡到目标值
21.     suspend fun animateTo(
22.         targetValue: T,
23.         animationSpec: AnimationSpec<T> = spring()
24.     ) {
25.         animationState.animateTo(
26.             targetValue = targetValue,
27.             animationSpec = animationSpec,
28.             onUpdate = { value ->
29.                 _value = value
30.             }
31.         )
32.     }
33. }

复制代码

• Animatable 类接受一个初始值和一个类型转换器 typeConverter。
  
• snapTo 方法用于立即将动画的值设置为指定的值。
  
• animateTo 方法用于启动动画，将动画的值从当前值过渡到目标值。在动画过程中，会不断调用 onUpdate 回调更新当前值。
  

detectHorizontalDragGestures 源码分析

detectHorizontalDragGestures 是用于监听程度滑动手势的函数。以下是其简化源码分析：
kotlin

1. suspend fun PointerInputScope.detectHorizontalDragGestures(
2.     onDragStart: (Offset) -> Unit = {},
3.     onDrag: (change: PointerInputChange, dragAmount: Offset) -> Unit,
4.     onDragEnd: () -> Unit = {},
5.     onDragCancel: () -> Unit = {}
6. ) {
7.     awaitPointerEventScope {
8.         while (true) {
9.             // 等待第一个按下事件
10.             val down = awaitFirstDown(requireUnconsumed = false)
11.             onDragStart(down.position)
12.             var overSlop = Offset.Zero
13.             do {
14.                 // 等待下一个指针事件
15.                 val event = awaitPointerEvent()
16.                 val dragChange = event.changes.find { it.id == down.id }!!
17.                 if (dragChange.pressed) {
18.                     // 计算拖动的偏移量
19.                     val dragDelta = dragChange.positionChange()
20.                     overSlop += dragDelta
21.                     if (abs(overSlop.x) > ViewConfiguration.get(this@PointerInputScope).scaledTouchSlop) {
22.                         // 当拖动距离超过阈值时，调用 onDrag 回调
23.                         dragChange.consume()
24.                         onDrag(dragChange, Offset(dragDelta.x, 0f))
25.                     }
26.                 }
27.             } while (dragChange.pressed)
28.             if (dragChange.isConsumed) {
29.                 // 当拖动结束且事件已被消费时，调用 onDragEnd 回调
30.                 onDragEnd()
31.             } else {
32.                 // 当拖动取消时，调用 onDragCancel 回调
33.                 onDragCancel()
34.             }
35.         }
36.     }
37. }

复制代码

• detectHorizontalDragGestures 函数在一个协程中不断监听指针事件。
  
• 当检测到按下事件时，调用 onDragStart 回调。
  
• 在拖动过程中，盘算拖动的偏移量，当偏移量高出阈值时，调用 onDrag 回调。
  
• 当拖动竣事且事件已被消耗时，调用 onDragEnd 回调；当拖动取消时，调用 onDragCancel 回调。
  

2.5 优化滑动删除功能

增加删除提示

可以在列表项滑动时显示删除提示，加强用户体验。以下是优化后的代码：
kotlin

1. import androidx.compose.animation.core.Animatable
2. import androidx.compose.animation.core.AnimationVector1D
3. import androidx.compose.animation.core.tween
4. import androidx.compose.foundation.background
5. import androidx.compose.foundation.gestures.detectHorizontalDragGestures
6. import androidx.compose.foundation.layout.*
7. import androidx.compose.material.*
8. import androidx.compose.runtime.*
9. import androidx.compose.ui.Alignment
10. import androidx.compose.ui.Modifier
11. import androidx.compose.ui.graphics.Color
12. import androidx.compose.ui.input.pointer.pointerInput
13. import androidx.compose.ui.unit.Dp
14. import androidx.compose.ui.unit.dp
16. @Composable
17. fun SwipeToDeleteListWithHint() {
18.     var items by remember { mutableStateOf((1..10).map { "Item $it" }.toList()) }
20.     Column(
21.         modifier = Modifier
22.            .fillMaxSize()
23.            .padding(16.dp)
24.     ) {
25.         items.forEachIndexed { index, item ->
26.             val offsetX = remember { Animatable(0f) }
28.             Box(
29.                 modifier = Modifier
30.                    .fillMaxWidth()
31.                    .padding(vertical = 4.dp)
32.             ) {
33.                 // 显示删除提示的背景
34.                 Box(
35.                     modifier = Modifier
36.                        .fillMaxSize()
37.                        .background(Color.Red)
38.                        .padding(16.dp)
39.                        .align(Alignment.CenterEnd)
40.                 ) {
41.                     Text(
42.                         text = "Delete",
43.                         color = Color.White
44.                     )
45.                 }
47.                 Card(
48.                     modifier = Modifier
49.                        .fillMaxWidth()
50.                        .pointerInput(Unit) {
51.                             detectHorizontalDragGestures(
52.                                 onDrag = { change, dragAmount ->
53.                                     val newOffset = offsetX.value + dragAmount.x
54.                                     offsetX.snapTo(newOffset.coerceIn(-200f, 0f))
55.                                     change.consume()
56.                                 },
57.                                 onDragEnd = {
58.                                     if (offsetX.value < -100f) {
59.                                         items = items.toMutableList().apply { removeAt(index) }
60.                                     } else {
61.                                         launch {
62.                                             offsetX.animateTo(
63.                                                 targetValue = 0f,
64.                                                 animationSpec = tween(durationMillis = 200)
65.                                             )
66.                                         }
67.                                     }
68.                                 }
69.                             )
70.                         }
71.                        .offset {
72.                             IntOffset(offsetX.value.toInt(), 0)
73.                         }
74.                 ) {
75.                     Text(
76.                         text = item,
77.                         modifier = Modifier.padding(16.dp)
78.                     )
79.                 }
80.             }
81.         }
82.     }
83. }

复制代码

代码表明

• 在 Box 组件中添加一个红色背景的 Box 作为删除提示，当列表项滑动时，删除提示会逐渐显示出来。
  
• 其他部门的代码与之前的示例类似，只是在结构上举行了调整。
  

三、拖拽功能实现

3.1 根本思绪

实现拖拽功能的根本思绪是监听列表项的长按手势，当检测到长按时，开始拖拽操作。在拖拽过程中，更新列表项的位置，并在拖拽竣事时，更新列表项的次序。在 Android Compose 中，可以通过 Modifier.pointerInput 监听手势事件，结合 Layout 组件实现列表项的位置更新。
3.2 简朴示例代码

kotlin

1. import androidx.compose.foundation.gestures.detectDragGestures
2. import androidx.compose.foundation.gestures.detectLongPressGestures
3. import androidx.compose.foundation.layout.*
4. import androidx.compose.material.*
5. import androidx.compose.runtime.*
6. import androidx.compose.ui.Alignment
7. import androidx.compose.ui.Modifier
8. import androidx.compose.ui.graphics.graphicsLayer
9. import androidx.compose.ui.input.pointer.pointerInput
10. import androidx.compose.ui.unit.IntOffset
11. import androidx.compose.ui.unit.dp
12. import kotlin.math.roundToInt
14. // 定义一个可组合函数，用于展示包含拖拽功能的列表
15. @Composable
16. fun DragAndDropList() {
17.     // 使用 mutableStateOf 创建一个可变的列表，用于存储列表项数据
18.     var items by remember { mutableStateOf((1..10).map { "Item $it" }.toList()) }
19.     // 用于记录当前正在拖拽的列表项的索引，初始值为 -1 表示没有拖拽操作
20.     var draggedIndex by remember { mutableStateOf(-1) }
21.     // 用于记录拖拽过程中的偏移量，初始值为 IntOffset(0, 0)
22.     var offset by remember { mutableStateOf(IntOffset(0, 0)) }
24.     Column(
25.         modifier = Modifier
26.            .fillMaxSize()
27.            .padding(16.dp)
28.     ) {
29.         // 遍历列表中的每一项
30.         items.forEachIndexed { index, item ->
31.             // 创建一个 Card 组件作为列表项的容器
32.             Card(
33.                 modifier = Modifier
34.                    .fillMaxWidth()
35.                    .padding(vertical = 4.dp)
36.                    .pointerInput(Unit) {
37.                         // 监听长按手势
38.                         detectLongPressGestures(
39.                             onLongPress = {
40.                                 // 当检测到长按时，记录当前拖拽的列表项索引
41.                                 draggedIndex = index
42.                             },
43.                             onDrag = { change, dragAmount ->
44.                                 // 当正在拖拽时，更新偏移量
45.                                 if (draggedIndex != -1) {
46.                                     offset = IntOffset(
47.                                         (offset.x + dragAmount.x).roundToInt(),
48.                                         (offset.y + dragAmount.y).roundToInt()
49.                                     )
50.                                     // 标记手势事件已被消费
51.                                     change.consume()
52.                                 }
53.                             },
54.                             onDragEnd = {
55.                                 if (draggedIndex != -1) {
56.                                     // 当拖拽结束时，计算新的索引位置
57.                                     val newIndex = (offset.y / 56.dp.toPx()).roundToInt() + draggedIndex
58.                                     // 确保新的索引位置在有效范围内
59.                                     val validNewIndex = newIndex.coerceIn(0, items.size - 1)
60.                                     // 更新列表项的顺序
61.                                     items = items.toMutableList().apply {
62.                                         val draggedItem = removeAt(draggedIndex)
63.                                         add(validNewIndex, draggedItem)
64.                                     }
65.                                     // 重置拖拽索引和偏移量
66.                                     draggedIndex = -1
67.                                     offset = IntOffset(0, 0)
68.                                 }
69.                             }
70.                         )
71.                     }
72.                    .graphicsLayer {
73.                         // 如果当前列表项正在被拖拽，应用偏移量
74.                         if (index == draggedIndex) {
75.                             translationX = offset.x.toFloat()
76.                             translationY = offset.y.toFloat()
77.                         }
78.                     }
79.             ) {
80.                 // 在 Card 中显示列表项的文本
81.                 Text(
82.                     text = item,
83.                     modifier = Modifier.padding(16.dp)
84.                 )
85.             }
86.         }
87.     }
88. }

复制代码

3.3 代码表明

• 状态管理：使用 mutableStateOf 创建三个可变状态：items 用于存储列表项的数据，draggedIndex 用于记录当前正在拖拽的列表项的索引，offset 用于记录拖拽过程中的偏移量。
  
• 手势监听：使用 Modifier.pointerInput 和 detectLongPressGestures 监听列表项的长按和拖拽手势。在 onLongPress 回调中，记录当前拖拽的列表项索引；在 onDrag 回调中，更新偏移量；在 onDragEnd 回调中，盘算新的索引位置，并更新列表项的次序。
  
• 位置更新：使用 graphicsLayer 组件应用偏移量，实现列表项的位置更新。
  

3.4 源码分析

detectLongPressGestures 源码分析

detectLongPressGestures 是用于监听长按和拖拽手势的函数。以下是其简化源码分析：
kotlin

1. suspend fun PointerInputScope.detectLongPressGestures(
2.     onLongPress: (Offset) -> Unit = {},
3.     onDragStart: (Offset) -> Unit = {},
4.     onDrag: (change: PointerInputChange, dragAmount: Offset) -> Unit,
5.     onDragEnd: () -> Unit = {},
6.     onDragCancel: () -> Unit = {}
7. ) {
8.     awaitPointerEventScope {
9.         while (true) {
10.             // 等待第一个按下事件
11.             val down = awaitFirstDown(requireUnconsumed = false)
12.             var longPressDetected = false
13.             // 启动一个协程，在长按时间后检测是否触发长按事件
14.             val longPressJob = launch {
15.                 delay(ViewConfiguration.get(this@PointerInputScope).longPressTimeoutMillis)
16.                 if (down.pressed) {
17.                     longPressDetected = true
18.                     onLongPress(down.position)
19.                 }
20.             }
21.             var overSlop = Offset.Zero
22.             do {
23.                 // 等待下一个指针事件
24.                 val event = awaitPointerEvent()
25.                 val dragChange = event.changes.find { it.id == down.id }!!
26.                 if (dragChange.pressed) {
27.                     // 计算拖动的偏移量
28.                     val dragDelta = dragChange.positionChange()
29.                     overSlop += dragDelta
30.                     if (abs(overSlop.getDistance()) > ViewConfiguration.get(this@PointerInputScope).scaledTouchSlop) {
31.                         if (longPressDetected) {
32.                             // 当长按事件已触发且拖动距离超过阈值时，调用 onDragStart 回调
33.                             longPressJob.cancel()
34.                             onDragStart(down.position)
35.                             while (dragChange.pressed) {
36.                                 // 持续监听拖动事件，调用 onDrag 回调
37.                                 val nextEvent = awaitPointerEvent()
38.                                 val nextDragChange = nextEvent.changes.find { it.id == down.id }!!
39.                                 if (nextDragChange.pressed) {
40.                                     val nextDragDelta = nextDragChange.positionChange()
41.                                     onDrag(nextDragChange, nextDragDelta)
42.                                     nextDragChange.consume()
43.                                 }
44.                             }
45.                             // 当拖动结束时，调用 onDragEnd 回调
46.                             onDragEnd()
47.                         } else {
48.                             // 当长按事件未触发且拖动距离超过阈值时，取消长按协程
49.                             longPressJob.cancel()
50.                         }
51.                         break
52.                     }
53.                 }
54.             } while (dragChange.pressed)
55.             if (!longPressDetected) {
56.                 // 当长按事件未触发时，取消长按协程
57.                 longPressJob.cancel()
58.             }
59.         }
60.     }
61. }

复制代码

• detectLongPressGestures 函数在一个协程中不断监听指针事件。
  
• 当检测到按下事件时，启动一个协程，在长按时间后检测是否触发长按事件。
  
• 在拖动过程中，盘算拖动的偏移量，当偏移量高出阈值时，根据长按事件是否触发，执行相应的操作。
  
• 当拖动竣事时，调用 onDragEnd 回调。
  

graphicsLayer 源码分析

graphicsLayer 是用于应用图形变动的修饰符。以下是其简化源码分析：
kotlin

1. fun Modifier.graphicsLayer(
2.     alpha: Float = 1f,
3.     scaleX: Float = 1f,
4.     scaleY: Float = 1f,
5.     translationX: Float = 0f,
6.     translationY: Float = 0f,
7.     rotationX: Float = 0f,
8.     rotationY: Float = 0f,
9.     rotationZ: Float = 0f,
10.     shadowElevation: Float = 0f,
11.     shape: Shape = RectangleShape,
12.     clip: Boolean = false,
13.     transformOrigin: TransformOrigin = TransformOrigin.Center
14. ): Modifier = composed {
15.     val layer = remember { GraphicsLayerScope() }
16.     layer.alpha = alpha
17.     layer.scaleX = scaleX
18.     layer.scaleY = scaleY
19.     layer.translationX = translationX
20.     layer.translationY = translationY
21.     layer.rotationX = rotationX
22.     layer.rotationY = rotationY
23.     layer.rotationZ = rotationZ
24.     layer.shadowElevation = shadowElevation
25.     layer.shape = shape
26.     layer.clip = clip
27.     layer.transformOrigin = transformOrigin
28.     this.then(
29.         LayoutModifier { measurable, constraints ->
30.             val placeable = measurable.measure(constraints)
31.             layout(placeable.width, placeable.height) {
32.                 placeable.placeRelative(
33.                     x = layer.translationX.roundToInt(),
34.                     y = layer.translationY.roundToInt()
35.                 )
36.             }
37.         }
38.     )
39. }

复制代码

• graphicsLayer 修饰符接受多个参数，用于设置图形变动的属性，如透明度、缩放、平移、旋转等。
  
• 在 LayoutModifier 中，根据设置的属性对组件举行结构和变动。
  

3.5 优化拖拽功能

增加拖拽动画

可以在拖拽过程中增加动画结果，提升用户体验。以下是优化后的代码：
kotlin

1. import androidx.compose.animation.core.Animatable
2. import androidx.compose.animation.core.AnimationVector2D
3. import androidx.compose.animation.core.tween
4. import androidx.compose.foundation.gestures.detectDragGestures
5. import androidx.compose.foundation.gestures.detectLongPressGestures
6. import androidx.compose.foundation.layout.*
7. import androidx.compose.material.*
8. import androidx.compose.runtime.*
9. import androidx.compose.ui.Alignment
10. import androidx.compose.ui.Modifier
11. import androidx.compose.ui.graphics.graphicsLayer
12. import androidx.compose.ui.input.pointer.pointerInput
13. import androidx.compose.ui.unit.IntOffset
14. import androidx.compose.ui.unit.dp
15. import kotlin.math.roundToInt
17. @Composable
18. fun DragAndDropListWithAnimation() {
19.     var items by remember { mutableStateOf((1..10).map { "Item $it" }.toList()) }
20.     var draggedIndex by remember { mutableStateOf(-1) }
21.     val offsetX = remember { Animatable(0f) }
22.     val offsetY = remember { Animatable(0f) }
24.     Column(
25.         modifier = Modifier
26.            .fillMaxSize()
27.            .padding(16.dp)
28.     ) {
29.         items.forEachIndexed { index, item ->
30.             Card(
31.                 modifier = Modifier
32.                    .fillMaxWidth()
33.                    .padding(vertical = 4.dp)
34.                    .pointerInput(Unit) {
35.                         detectLongPressGestures(
36.                             onLongPress = {
37.                                 draggedIndex = index
38.                             },
39.                             onDrag = { change, dragAmount ->
40.                                 if (draggedIndex != -1) {
41.                                     launch {
42.                                         offsetX.snapTo(offsetX.value + dragAmount.x)
43.                                         offsetY.snapTo(offsetY.value + dragAmount.y)
44.                                     }
45.                                     change.consume()
46.                                 }
47.                             },
48.                             onDragEnd = {
49.                                 if (draggedIndex != -1) {
50.                                     val newIndex = (offsetY.value / 56.dp.toPx()).roundToInt() + draggedIndex
51.                                     val validNewIndex = newIndex.coerceIn(0, items.size - 1)
52.                                     items = items.toMutableList().apply {
53.                                         val draggedItem = removeAt(draggedIndex)
54.                                         add(validNewIndex, draggedItem)
55.                                     }
56.                                     launch {
57.                                         offsetX.animateTo(
58.                                             targetValue = 0f,
59.                                             animationSpec = tween(durationMillis = 200)
60.                                         )
61.                                         offsetY.animateTo(
62.                                             targetValue = 0f,
63.                                             animationSpec = tween(durationMillis = 200)
64.                                         )
65.                                     }
66.                                     draggedIndex = -1
67.                                 }
68.                             }
69.                         )
70.                     }
71.                    .graphicsLayer {
72.                         if (index == draggedIndex) {
73.                             translationX = offsetX.value
74.                             translationY = offsetY.value
75.                         }
76.                     }
77.             ) {
78.                 Text(
79.                     text = item,
80.                     modifier = Modifier.padding(16.dp)
81.                 )
82.             }
83.         }
84.     }
85. }

复制代码

代码表明

• 使用 Animatable 实现拖拽过程中的动画结果。在 onDrag 回调中，使用 snapTo 方法立即更新偏移量；在 onDragEnd 回调中，使用 animateTo 方法将偏移量动画回 0。
  
• 其他部门的代码与之前的示例类似，只是在偏移量的处理上增加了动画结果。
  

四、滑动删除与拖拽的结合使用

4.1 实现思绪

在现实应用中，大概需要同时实现滑动删除和拖拽功能。实现思绪是在监听手势事件时，根据不同的手势操作执行相应的功能。例如，当检测到程度滑动且滑动距离高出肯定阈值时，执行滑动删除操作；当检测到长按并拖动时，执行拖拽操作。
4.2 示例代码

kotlin

1. import androidx.compose.animation.core.Animatable
2. import androidx.compose.animation.core.AnimationVector1D
3. import androidx.compose.animation.core.AnimationVector2D
4. import androidx.compose.animation.core.tween
5. import androidx.compose.foundation.gestures.detectDragGestures
6. import androidx.compose.foundation.gestures.detectHorizontalDragGestures
7. import androidx.compose.foundation.gestures.detectLongPressGestures
8. import androidx.compose.foundation.layout.*
9. import androidx.compose.material.*
10. import androidx.compose.runtime.*
11. import androidx.compose.ui.Alignment
12. import androidx.compose.ui.Modifier
13. import androidx.compose.ui.graphics.Color
14. import androidx.compose.ui.graphics.graphicsLayer
15. import androidx.compose.ui.input.pointer.pointerInput
16. import androidx.compose.ui.unit.IntOffset
17. import androidx.compose.ui.unit.dp
18. import kotlin.math.abs
19. import kotlin.math.roundToInt
21. @Composable
22. fun SwipeAndDragList() {
23.     var items by remember { mutableStateOf((1..10).map { "Item $it" }.toList()) }
24.     var draggedIndex by remember { mutableStateOf(-1) }
25.     val offsetX = remember { Animatable(0f) }
26.     val offsetY = remember { Animatable(0f) }
28.     Column(
29.         modifier = Modifier
30.            .fillMaxSize()
31.            .padding(16.dp)
32.     ) {
33.         items.forEachIndexed { index, item ->
34.             Box(
35.                 modifier = Modifier
36.                    .fillMaxWidth()
37.                    .padding(vertical = 4.dp)
38.             ) {
39.                 Box(
40.                     modifier = Modifier
41.                        .fillMaxSize()
42.                        .background(Color.Red)
43.                        .padding(16.dp)
44.                        .align(Alignment.CenterEnd)
45.                 ) {
46.                     Text(
47.                         text = "Delete",
48.                         color = Color.White
49.                     )
50.                 }
52.                 Card(
53.                     modifier = Modifier
54.                        .fillMaxWidth()
55.                        .pointerInput(Unit) {
56.                             detectLongPressGestures(
57.                                 onLongPress = {
58.                                     draggedIndex = index
59.                                 },
60.                                 onDrag = { change, dragAmount ->
61.                                     if (draggedIndex != -1) {
62.                                         launch {
63.                                             offsetX.snapTo(offsetX.value + dragAmount.x)
64.                                             offsetY.snapTo(offsetY.value + dragAmount.y)
65.                                         }
66.                                         change.consume()
67.                                     }
68.                                 },
69.                                 onDragEnd = {
70.                                     if (draggedIndex != -1) {
71.                                         if (abs(offsetX.value) > 100f) {
72.                                             items = items.toMutableList().apply { removeAt(draggedIndex) }
73.                                         } else {
74.                                             val newIndex = (offsetY.value / 56.dp.toPx()).roundToInt() + draggedIndex
75.                                             val validNewIndex = newIndex.coerceIn(0, items.size - 1)
76.                                             items = items.toMutableList().apply {
77.                                                 val draggedItem = removeAt(draggedIndex)
78.                                                 add(validNewIndex, draggedItem)
79.                                             }
80.                                         }
81.                                         launch {
82.                                             offsetX.animateTo(
83.                                                 targetValue = 0f,
84.                                                 animationSpec = tween(durationMillis = 200)
85.                                             )
86.                                             offsetY.animateTo(
87.                                                 targetValue = 0f,
88.                                                 animationSpec = tween(durationMillis = 200)
89.                                             )
90.                                         }
91.                                         draggedIndex = -1
92.                                     }
93.                                 }
94.                             )
95.                             detectHorizontalDragGestures(
96.                                 onDrag = { change, dragAmount ->
97.                                     if (draggedIndex == -1) {
98.                                         val newOffset = offsetX.value + dragAmount.x
99.                                         offsetX.snapTo(newOffset.coerceIn(-200f, 0f))
100.                                         change.consume()
101.                                     }
102.                                 },
103.                                 onDragEnd = {
104.                                     if (draggedIndex == -1) {
105.                                         if (offsetX.value < -100f) {
106.                                             items = items.toMutableList().apply { removeAt(index) }
107.                                         } else {
108.                                             launch {
109.                                                 offsetX.animateTo(
110.                                                     targetValue = 0f,
111.                                                     animationSpec = tween(durationMillis = 200)
112.                                                 )
113.                                             }
114.                                         }
115.                                     }
116.                                 }
117.                             )
118.                         }
119.                        .graphicsLayer {
120.                             if (index == draggedIndex) {
121.                                 translationX = offsetX.value
122.                                 translationY = offsetY.value
123.                             } else {
124.                                 translationX = offsetX.value
125.                             }
126.                         }
127.                 ) {
128.                     Text(
129.                         text = item,
130.                         modifier = Modifier.padding(16.dp)
131.                     )
132.                 }
133.             }
134.         }
135.     }
136. }

复制代码

4.3 代码表明

• 状态管理：使用 mutableStateOf 创建四个可变状态：items 用于存储列表项的数据，draggedIndex 用于记录当前正在拖拽的列表项的索引，offsetX 和 offsetY 用于记录拖拽过程中的偏移量。
  
• 手势监听：使用 detectLongPressGestures 监听长按和拖拽手势，使用 detectHorizontalDragGestures 监听程度滑动手势。在不同的手势回调中，根据当前的状态执行相应的操作。
  
• 功能实现：当检测到长按并拖动时，执行拖拽操作；当检测到程度滑动且滑动距离高出 -100f 时，执行滑动删除操作。
  

4.4 源码分析

在结合使用滑动删除和拖拽功能时，主要是对之前的手势监听和状态管理代码举行整合。在 detectLongPressGestures 和 detectHorizontalDragGestures 的回调中，根据 draggedIndex 的值判断当前是处于拖拽状态还是滑动删除状态，从而执行相应的操作。
五、性能优化

5.1 减少不必要的重绘

在实现滑动删除和拖拽功能时，要只管减少不必要的重绘。例如，在 Animatable 的 animateTo 方法中，可以使用 tween 动画规格并设置符合的连续时间，避免动画过于频仍导致的性能问题。同时，在手势监听回调中，使用 change.consume() 标记手势事件已被消耗，避免不必要的事件流传。
5.2 公道使用 remember

在使用 Animatable 和其他可变状态时，使用 remember 函数举行影象，避免在每次重组时重新创建对象。例如，在前面的示例中，使用 remember { Animatable(0f) } 创建 Animatable 对象，确保在组件的生命周期内只创建一次。
5.3 避免嵌套过多的组件

在结构设计时，要避免嵌套过多的组件，减少结构的复杂度。过多的组件嵌套会增加结构的测量和绘制时间，影响性能。例如，在实现滑动删除提示时，可以使用简朴的 Box 组件，而不是复杂的结构嵌套。
六、总结与展望

6.1 总结

本文深入分析了 Android Compose 框架的列表与集合模块中滑动删除与拖拽功能的实现原理和源码。通过详细的代码示例和源码分析，我们了解了怎样使用 Modifier.pointerInput 监听手势事件，使用 Animatable 实现动画结果，以及怎样结合 Layout 组件实现列表项的位置更新。同时，我们还学习了怎样优化滑动删除和拖拽功能，包括增加提示、动画结果和性能优化等方面。
6.2 展望

随着 Android Compose 的不断发展，滑动删除和拖拽功能大概会有更多的优化和扩展。例如，大概会提供更方便的 API 来实现这些功能，减少开辟者的代码量。同时，大概会支持更多的手势操作和动画结果，提升用户体验。别的，性能优化方面也大概会有进一步的改进，确保在不同装备上都能有流畅的交互结果。未来，开辟者可以更加轻松地在 Android Compose 中实现复杂的列表交互功能。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。