ลาก ปัด และสะบัด

ตัวแปร draggable เป็นตัวยึดตําแหน่งระดับสูงสําหรับท่าทางสัมผัสการลากในแนวเดียว และรายงานระยะการลากเป็นพิกเซล

โปรดทราบว่าตัวแก้ไขนี้คล้ายกับ scrollable ตรงที่ตรวจจับเฉพาะท่าทางสัมผัสเท่านั้น คุณต้องเก็บสถานะไว้และแสดงบนหน้าจอ เช่น ย้ายองค์ประกอบผ่านตัวแก้ไข offset ดังนี้

@Composable
private fun DraggableText() {
    var offsetX by remember { mutableStateOf(0f) }
    Text(
        modifier = Modifier
            .offset { IntOffset(offsetX.roundToInt(), 0) }
            .draggable(
                orientation = Orientation.Horizontal,
                state = rememberDraggableState { delta ->
                    offsetX += delta
                }
            ),
        text = "Drag me!"
    )
}
GesturesSnippets.kt

หากต้องการควบคุมท่าทางสัมผัสการลากทั้งหมด ให้พิจารณาใช้ตัวตรวจจับท่าทางสัมผัสการลากแทนผ่านตัวแก้ไข pointerInput

@Composable
private fun DraggableTextLowLevel() {
    Box(modifier = Modifier.fillMaxSize()) {
        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(0f) }

        Box(
            Modifier
                .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                .background(Color.Blue)
                .size(50.dp)
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()
                        offsetX += dragAmount.x
                        offsetY += dragAmount.y
                    }
                }
        )
    }
}
GesturesSnippets.kt

องค์ประกอบ UI ที่ถูกลากโดยการกดนิ้ว

การเลื่อน

ตัวแก้ไข swipeable ช่วยให้คุณลากองค์ประกอบได้ ซึ่งเมื่อปล่อยแล้ว องค์ประกอบจะเคลื่อนไหวไปยังจุดยึดอย่างน้อย 2 จุดที่กําหนดไว้ในการวางแนว การใช้งานทั่วไปสำหรับกรณีนี้คือการใช้รูปแบบ "ปัดเพื่อปิด"

โปรดทราบว่าตัวแก้ไขนี้ไม่ได้ย้ายองค์ประกอบ แต่จะตรวจจับท่าทางสัมผัสเท่านั้น คุณต้องเก็บสถานะไว้และแสดงบนหน้าจอ เช่น ย้ายองค์ประกอบผ่านตัวแก้ไข offset

ต้องมีสถานะที่ปัดได้ในตัวแก้ไข swipeable และสามารถสร้างและจดจำได้ด้วย rememberSwipeableState() สถานะนี้ยังมีชุดเมธอดที่มีประโยชน์ในการทำให้ภาพเคลื่อนไหวไปยังจุดยึดแบบเป็นโปรแกรม (ดู snapTo, animateTo, performFling และ performDrag) รวมถึงพร็อพเพอร์ตี้สำหรับดูความคืบหน้าในการลาก

คุณสามารถกําหนดค่าท่าทางสัมผัสด้วยการปัดให้มีเกณฑ์ประเภทต่างๆ เช่น FixedThreshold(Dp) และ FractionalThreshold(Float) และเกณฑ์เหล่านี้อาจแตกต่างกันไปตามชุดค่าผสมจาก-ถึงของจุดยึดแต่ละจุด

หากต้องการความยืดหยุ่นมากขึ้น คุณสามารถกําหนดค่า resistance เมื่อปัดผ่านขอบเขต และ velocityThreshold ซึ่งจะแสดงภาพเคลื่อนไหวของการปัดไปที่สถานะถัดไป แม้ว่าจะยังไม่ได้ไปถึง thresholds ตามตําแหน่ง

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun SwipeableSample() {
    val width = 96.dp
    val squareSize = 48.dp

    val swipeableState = rememberSwipeableState(0)
    val sizePx = with(LocalDensity.current) { squareSize.toPx() }
    val anchors = mapOf(0f to 0, sizePx to 1) // Maps anchor points (in px) to states

    Box(
        modifier = Modifier
            .width(width)
            .swipeable(
                state = swipeableState,
                anchors = anchors,
                thresholds = { _, _ -> FractionalThreshold(0.3f) },
                orientation = Orientation.Horizontal
            )
            .background(Color.LightGray)
    ) {
        Box(
            Modifier
                .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
                .size(squareSize)
                .background(Color.DarkGray)
        )
    }
}
GesturesSnippets.kt

องค์ประกอบ UI ที่ตอบสนองต่อท่าทางการปัด

ก่อนหน้า
เลื่อน
ถัดไป
ท่าทางสัมผัสแบบมัลติทัช