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