การป้อนข้อมูลด้วยปุ่มหมุนพร้อมการเขียน

การป้อนข้อมูลด้วยปุ่มหมุนหมายถึงการป้อนข้อมูลจากชิ้นส่วนของนาฬิกาที่หมุน โดยเฉลี่ยแล้ว ผู้ใช้โต้ตอบกับนาฬิกาเพียงไม่กี่วินาที คุณสามารถปรับปรุงประสบการณ์ของผู้ใช้ได้โดยใช้อินพุตแบบหมุนเพื่อให้ผู้ใช้ทำงานต่างๆ ได้อย่างรวดเร็ว

แหล่งที่มาหลัก 3 แหล่งของอินพุตแบบหมุนในนาฬิกาส่วนใหญ่ ได้แก่ ปุ่มด้านข้างแบบหมุน (RSB) และขอบแบบสัมผัสหรือขอบแบบสัมผัส ซึ่งเป็นโซนสัมผัสแบบวงกลมรอบหน้าจอ แม้ว่าลักษณะการทำงานที่คาดไว้อาจแตกต่างกันไปตามประเภทของอินพุต แต่อย่าลืมรองรับอินพุตแบบหมุนสำหรับการโต้ตอบที่สำคัญทั้งหมด

เลื่อน

ผู้ใช้ส่วนใหญ่คาดหวังให้แอปรองรับท่าทางสัมผัสในการเลื่อน ขณะที่เนื้อหาเลื่อนบนหน้าจอ ให้แสดงผลภาพเป็นฟีดแบ็กแก่ผู้ใช้เพื่อตอบสนองต่อการโต้ตอบแบบหมุน การแสดงผลภาพอาจรวมถึงตัวบ่งชี้ตำแหน่งสำหรับการเลื่อนแนวตั้งหรือตัวบ่งชี้หน้า

ScalingLazyColumn และ Picker รองรับท่าทางสัมผัสในการเลื่อนโดยค่าเริ่มต้น ตราบใดที่คุณต้องวางคอมโพเนนต์เหล่านั้นภายใน Scaffold Scaffold มีโครงสร้างเลย์เอาต์พื้นฐานสำหรับแอป Wear OS และมีช่องสำหรับตัวบ่งชี้การเลื่อนอยู่แล้ว หากต้องการแสดงความคืบหน้าของการเลื่อน ให้สร้างตัวบ่งชี้ตำแหน่งที่อิงตามออบเจ็กต์สถานะรายการ ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {
    // ...
}
Rotary.kt

คุณสามารถกําหนดค่าลักษณะการยึดของ ScalingLazyColumn โดยใช้ ScalingLazyColumnDefaults.snapFlingBehavior ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {

    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = state,
        flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
    ) {
        // Content goes here
        // ...
    }
}
Rotary.kt

การทำงานที่กำหนดเอง

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

หากคอมโพเนนต์ของคุณไม่รองรับเหตุการณ์การเลื่อนโดยค่าเริ่มต้น เช่น การควบคุมระดับเสียง คุณสามารถจัดการเหตุการณ์การเลื่อนด้วยตนเองได้

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            // handle rotary scroll events
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }

สร้างสถานะที่กําหนดเองซึ่งจัดการในโมเดลมุมมอง และการสร้างการเรียกคืนที่กําหนดเองซึ่งใช้เพื่อประมวลผลเหตุการณ์การเลื่อนแบบหมุน

// VolumeViewModel.kt

object VolumeRange(
    public val max: Int = 10
    public val min: Int = 0
)

val volumeState: MutableStateFlow<Int> = ...

fun onVolumeChangeByScroll(pixels: Float) {
    volumeState.value = when {
        pixels > 0 -> min (volumeState.value + 1, VolumeRange.max)
        pixels < 0 -> max (volumeState.value - 1, VolumeRange.min)
    }
}

ตัวอย่างก่อนหน้านี้ใช้ค่าพิกเซลที่อาจมีความละเอียดอ่อนมากเกินไปหากนำมาใช้จริง เพื่อความเรียบง่าย

ใช้การเรียกกลับเมื่อคุณได้รับเหตุการณ์ ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeState by volumeViewModel.volumeState.collectAsState()

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel
                .onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }