Compose for Wear OS 的清單功能

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

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

如要新增縮放和捲動效果，請使用 Modifier.transformedHeight，讓 Compose 在項目捲動至畫面時計算高度變化，並使用 transformation = SurfaceTransformation(transformationSpec) 套用視覺效果，包括將項目視覺縮放至與先前相符。

以下動畫展示元素沿著螢幕移動時，大小和透明度會如何變化：

下列程式碼片段說明如何使用 TransformingLazyColumn 版面配置建立清單，以便建立在各種 Wear OS 螢幕尺寸上都看起來很棒的內容。例如，在以下程式碼範例中，系統會在 TransformingLazyColumn 的 contentPadding 中設定清單中的第一個和最後一個元素，並為這兩個元素新增必要的邊框間距。為了顯示捲動指標，請在 ScreenScaffold 和 TransformingLazyColumn 之間共用 columnState：

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。這種效果可讓使用者更精準地瀏覽清單項目，也可讓他們更快速地瀏覽較長清單。

如要在 Horologist 版本的 ScalingLazyColumn 中加入此效果，請將 columnState 的 rotaryMode 參數設為 RotaryWithSnap，如以下程式碼片段所示：

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