Android Jetpack Compose 處理拖曳事件(點選、拖曳、放開)(pointerInput)

在 Android Jetpack Compose 中只要使用 Modifier.clickable 就可以很輕易的將內容增加點擊事件，並自動加上點擊動畫：

    
@Composable
fun MyBox() {
    Box(
        modifier = Modifier
            .background(Color.DarkGray)
            .clickable {
                Log.i("DragDetectComposable", "Clicked")
            }
    )
}
    

但是我想要處理點選、拖曳、放開的事件可以怎麼做？
使用 Modifier 的 pointerInput 就可以了！

    

@Composable
fun DragDetectComposable() {
    Box(
        modifier = Modifier
            .background(Color.DarkGray)
            .pointerInput(Unit) {
                this.detectDragGestures(
                    onDragStart = { offset ->
                        // 當拖曳開始時觸發(按住時還不會)
                        Log.i("DragDetectComposable", "Drag started at ${offset.x}, ${offset.y}")
                    },
                    onDragEnd = {
                        // 當拖曳結束時觸發(放開)
                        Log.i("DragDetectComposable", "Drag ended")
                    },
                    onDragCancel = {
                        // 當拖曳被取消時觸發(例如從接近頂部往下滑動，系統將通知列展開)
                        Log.i("DragDetectComposable", "Drag cancelled")
                    },
                    onDrag = { change, dragAmount ->
                        // 在拖曳過程中不斷觸發
                        Log.i("DragDetectComposable", "Dragging ${dragAmount.x}, ${dragAmount.y}")
                    }
                )
            }
    )
}
    

在 onDragStart 中是取得絕對位置的座標，左上角的座標是 (0,0)
拖曳時會持續觸發 onDrag ，每次 onDrag 都是與上一次觸發 onDrag 的座標做比較，例如一直往右下拖曳時座標 x, y 都會是正的，水平往左拖曳時則 x 座標是負的，y 是 0

參考資料：
Android Developers - Understand gestures