รายการช่วยให้ผู้ใช้เลือกรายการจากชุดตัวเลือกในอุปกรณ์ Wear OS ได้
อุปกรณ์ Wear OS หลายรุ่นใช้หน้าจอทรงกลม ซึ่งทำให้ดูรายการที่ปรากฏใกล้ด้านบนและด้านล่างของหน้าจอได้ยากขึ้น
ด้วยเหตุนี้ Compose สำหรับ Wear OS จึงมีLazyColumn คลาสเวอร์ชันหนึ่งที่ชื่อ TransformingLazyColumn ซึ่งรองรับภาพเคลื่อนไหวแบบปรับขนาดและมอร์ฟ
เมื่อรายการเลื่อนไปที่ขอบ รายการจะเล็กลงและจางหายไป
วิธีใช้เอฟเฟกต์การปรับขนาดและการเลื่อนที่แนะนำ
- ใช้
Modifier.transformedHeightเพื่อให้ Compose คำนวณการเปลี่ยนแปลงความสูงขณะที่รายการเลื่อนผ่าน หน้าจอ - ใช้
transformation = SurfaceTransformation(transformationSpec)เพื่อใช้ เอฟเฟกต์ภาพ ซึ่งรวมถึงการลดขนาดเนื้อหาของไอเทม - ใช้
TransformationSpecที่กำหนดเองสำหรับคอมโพเนนต์ที่ไม่ใช้transformationเป็นพารามิเตอร์ เช่นText
ภาพเคลื่อนไหวต่อไปนี้แสดงวิธีที่องค์ประกอบรายการปรับขนาดและเปลี่ยนรูปร่าง เมื่อเข้าใกล้ด้านบนและด้านล่างของหน้าจอ
ข้อมูลโค้ดต่อไปนี้แสดงวิธีสร้างรายการโดยใช้เลย์เอาต์TransformingLazyColumn เพื่อสร้างเนื้อหาที่
ดูดีบนขนาดหน้าจอ Wear OS ที่หลากหลาย
ตัวอย่างโค้ดยังแสดงให้เห็นการใช้ตัวแก้ไข
minimumVerticalContentPadding ซึ่งคุณควรตั้งค่าในรายการ
เพื่อใช้ระยะห่างที่ถูกต้องที่ด้านบนและด้านล่างของรายการ
หากต้องการแสดงตัวบ่งชี้การเลื่อน ให้แชร์ columnState ระหว่าง
ScreenScaffold กับ TransformingLazyColumn โดยทำดังนี้
val columnState = rememberTransformingLazyColumnState() val transformationSpec = rememberTransformationSpec() ScreenScaffold( scrollState = columnState ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding), transformation = SurfaceTransformation(transformationSpec) ) { Text(text = "Header") } } // ... other items item { Button( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding), transformation = SurfaceTransformation(transformationSpec), onClick = { /* ... */ }, icon = { Icon( imageVector = Icons.Default.Build, contentDescription = "build", ) }, ) { Text( text = "Build", maxLines = 1, overflow = TextOverflow.Ellipsis, ) } } } }
เพิ่มเอฟเฟกต์ดีดและปัด
หากต้องการเพิ่มลักษณะการทำงานแบบดีดและปัด ให้ตั้งค่าพารามิเตอร์flingBehavior
เป็น TransformingLazyColumnDefaults.snapFlingBehavior(columnState) ดังที่แสดง
ในข้อมูลโค้ดต่อไปนี้
val columnState = rememberTransformingLazyColumnState() ScreenScaffold(scrollState = columnState) { TransformingLazyColumn( state = columnState, flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState) ) { // ... // ... } }
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- Codelab Compose สำหรับ Wear OS
- รายการและตารางกริด
- การใช้ View ใน Compose