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
}

results matching ""

    No results matching ""