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


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

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

วิธีใช้เอฟเฟกต์การปรับขนาดและการเลื่อนที่แนะนำ

  1. ใช้ Modifier.transformedHeight เพื่อให้ Compose คำนวณการเปลี่ยนแปลงความสูงขณะที่รายการเลื่อนผ่าน หน้าจอ
  2. ใช้ transformation = SurfaceTransformation(transformationSpec) เพื่อใช้ เอฟเฟกต์ภาพ ซึ่งรวมถึงการลดขนาดเนื้อหาของไอเทม
  3. ใช้ 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)
    ) {
        // ...
        // ...
    }
}