使用 Compose for Wear OS 构建列表


列表允许用户在 Wear OS 设备上从一组选项中选择一个项目。

许多 Wear OS 设备使用圆形屏幕,这使得查看屏幕顶部和底部附近的列表项变得更加困难。因此,Compose for Wear OS 包含一个 LazyColumn 类的版本,名为 TransformingLazyColumn,它支持缩放和变形动画。当项目移动到边缘时,它们会变小并逐渐消失。

为了添加缩放和滚动效果,请使用 Modifier.transformedHeight 让 Compose 计算项目在屏幕上滚动时的身高变化,并使用 transformation = SurfaceTransformation(transformationSpec) 应用视觉效果,包括视觉上缩小项目以匹配前一个项目。

以下动画展示了元素大小和透明度随其在屏幕上移动而发生的变化

以下代码段展示了如何使用 TransformingLazyColumn 布局创建内容,使其在各种 Wear OS 屏幕尺寸上都表现出色。例如,在以下示例代码中,它会将必要的内边距添加到列表的第一个和最后一个元素,这些内边距在 TransformingLazyColumncontentPadding 中设置。为了显示滚动指示器,请在 ScreenScaffoldTransformingLazyColumn 之间共享 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,
                )
            }
        }
    }
}

添加快速滑动效果

如果您需要添加快速滑动行为,我们建议使用 ScalingLazyColumn。此效果可帮助用户更精确地浏览列表中的项目,同时也能帮助他们更快地浏览长列表。

要将此效果添加到 Horologist 版本的 ScalingLazyColumn 中,请将 columnStaterotaryMode 参数设置为 RotaryWithSnap,如以下代码段所示

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