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

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

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

เลื่อน

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

ScalingLazyColumn, TransformingLazyColumn และ Picker รองรับท่าทางการเลื่อน โดยค่าเริ่มต้น ตราบใดที่คุณต้องวางคอมโพเนนต์เหล่านั้นไว้ภายใน AppScaffold และ ScreenScaffold และส่งสถานะรายการระหว่าง ScreenScaffold กับคอมโพเนนต์ เช่น TransformingLazyColumn

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

val listState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {
    // ...
}
Rotary.kt

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

val listState = rememberScalingLazyListState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {

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

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

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

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

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

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

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

// 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(),
) { ... }