รายการด้วย Compose สำหรับ Wear OS

รายการช่วยให้ผู้ใช้เลือกรายการจากชุดตัวเลือกในอุปกรณ์ Wear OS ได้

อุปกรณ์ Wear OS จำนวนมากใช้หน้าจอกลม ซึ่งทำให้มองเห็นยากขึ้น แสดงรายการที่ปรากฏใกล้กับด้านบนและด้านล่างของหน้าจอ ด้วยเหตุนี้ Compose สำหรับ Wear OS มีคลาส LazyColumn เวอร์ชันชื่อ ScalingLazyColumn ซึ่งรองรับการปรับขนาดและการเฟดเอฟเฟกต์ เมื่อรายการ เคลื่อนเข้าหาตรงกลางหน้าจอ จะมีขนาดใหญ่ขึ้นและทึบแสงมากขึ้น

ภาพเคลื่อนไหวต่อไปนี้แสดงให้เห็นว่าขนาดและความโปร่งใสขององค์ประกอบมีการเปลี่ยนแปลงอย่างไร การเลื่อนไปตามหน้าจอ

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

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

เพิ่มเอฟเฟกต์ที่สั้นและฉูดฉาด

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

หากต้องการเพิ่มเอฟเฟกต์นี้ใน ScalingLazyColumn เวอร์ชันของ Horologist ตั้งพารามิเตอร์ rotaryMode ของ columnState เป็น RotaryWithSnap ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt