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

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

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

หากต้องการเพิ่มเอฟเฟกต์การปรับขนาดและการเลื่อน ให้ใช้ Modifier.transformedHeight เพื่ออนุญาตให้ Compose คำนวณการเปลี่ยนแปลงความสูงเมื่อรายการเลื่อนผ่านหน้าจอ และ transformation = SurfaceTransformation(transformationSpec) เพื่อใช้เอฟเฟกต์ภาพ ซึ่งรวมถึงการปรับขนาดรายการให้เล็กลงเพื่อให้ตรงกับรายการก่อนหน้า

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

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

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

เพิ่มเอฟเฟกต์การกระแทกและพุ่ง

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

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

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