detectHorizontalDragGestures
語法
1
2
3
4
5
6
suspend fun PointerInputScope.detectHorizontalDragGestures(
onDragStart: (Offset) -> Unit = {},
onDragEnd: () -> Unit = {},
onDragCancel: () -> Unit = {},
onHorizontalDrag: (change: PointerInputChange, dragAmount: Float) -> Unit
)
| 參數 | 觸發時機 | 參數 | 常見用途 |
|---|---|---|---|
| onDragStart | 手指開始拖拽時 | Offset(起始位置) | 初始化狀態、記錄起始點 |
| onHorizontalDrag | 手指水平移動時 | change, dragAmount | 更新UI位置、處理拖拽邏輯 |
| onDragEnd | 手指正常抬起時 | 無 | 完成操作、觸發動畫 |
| onDragCancel | 拖拽被中斷時 | 無 | 恢復狀態、取消操作 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@Composable
fun DragExample2() {
var offset by remember { mutableStateOf(Offset.Zero) }
var offsetX by remember { mutableStateOf(0f) }
Box(
modifier = Modifier
.fillMaxSize()
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(20.dp)
.offset { IntOffset(offsetX.roundToInt(), 0) }
.background(Color.Blue)
.pointerInput(Unit) {
detectHorizontalDragGestures(
onDragStart = { changeOffset ->
offset = changeOffset
},
onDragEnd = {
if(offsetX < -size.width || offsetX > size.width) {
// 刪掉
} else {
// 彈回
offsetX = 0f
}
},
onDragCancel = {
},
onHorizontalDrag = { change, dragAmount ->
offsetX += dragAmount
change.consume()
}
)
}
) {
Text(" offsetX = ${offsetX.roundToInt()} x= ${offset.x} y = ${offset.y}")
}
}
}
PointerInputScope.size
1
2
3
4
5
6
7
8
9
interface PointerInputScope : Density {
/**
* The measured size of the pointer input region.
* Input events will be reported with a coordinate space of
* (0, 0) to (size.width, size.height) as the input region,
* with (0, 0) indicating the upper left corner.
*/
val size: IntSize
}