Compose for Wear OS 的清單功能

Compose for Wear OS Material 版本 2.5 3

---

使用者可透過清單功能，從 Wear OS 裝置上的一組選項中選取所需項目。

由於許多 Wear OS 裝置都採用圓形螢幕，導致使用者難以查看螢幕頂端和底部附近的清單項目，因此，Compose for Wear OS 納入了名為 TransformingLazyColumn 的 LazyColumn 類別版本，藉此支援縮放和變形動畫。項目移至邊緣時，會縮小並淡出。

如要套用建議的縮放和捲動效果，請按照下列步驟操作：

1. 使用 Modifier.transformedHeight，讓 Compose 在項目捲動瀏覽畫面時計算高度變化。
2. 使用 transformation = SurfaceTransformation(transformationSpec) 套用視覺效果，包括縮小項目內容。
3. 對於不以 transformation 做為參數的元件 (例如 Text)，請使用自訂 TransformationSpec。

以下動畫顯示清單元素接近螢幕頂端和底部時，如何縮放及變更形狀：

下列程式碼片段說明如何使用 TransformingLazyColumn 版面配置建立清單，在各種 Wear OS 螢幕尺寸上呈現絕佳內容。

程式碼片段也示範了 minimumVerticalContentPadding 修飾符的用法，您應在清單項目上設定這個修飾符，以便在清單頂端和底部套用正確的邊框間距。

如要顯示捲動指標，請在 ScreenScaffold 和 TransformingLazyColumn 之間分享 columnState：

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,
                )
            }
        }
    }
}
List.kt

新增貼齊與快速滑過效果

如要新增快速捲動行為，請將 flingBehavior 參數設為 TransformingLazyColumnDefaults.snapFlingBehavior(columnState)，如以下程式碼片段所示：

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt