Compose for Wear OS 的列表功能

Compose for Wear OS Material 版本 2.5 3

---

在 Wear OS 设备上，列表用于提供一组选项来供用户选择。

许多 Wear OS 设备都使用圆形屏幕，用户不方便查看靠近屏幕顶部和底部的列表项。因此，Compose for Wear OS 提供了一个名为 TransformingLazyColumn 的 LazyColumn 类版本，该版本支持缩放和形变动画。当有列表项移至屏幕边缘时，便会缩小并淡出。

为了添加缩放和滚动效果，请使用 Modifier.transformedHeight，让 Compose 计算列表项在屏幕上滚动时的高度变化，并使用 transformation = SurfaceTransformation(transformationSpec) 来应用视觉效果，包括从外观上将列表项缩小，以使其匹配前一项。对于不使用 transformation 作为参数的组件（例如 Text），请使用自定义 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