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

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

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

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

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

ข้อมูลโค้ดต่อไปนี้แสดงวิธีสร้างรายการโดยใช้เลย์เอาต์ 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