Compose for Wear OS 的列表功能

在 Wear OS 设备上,用户可通过列表从一组选项中选择一个项目。

许多 Wear OS 设备都使用圆形屏幕,不方便用户查看靠近屏幕顶部和底部的列表项。因此,Compose for Wear OS 包含一个名为 ScalingLazyColumnLazyColumn 类版本,该版本支持缩放和淡出效果。当项目向屏幕中心移动时,便会变大且更不透明。

以下动画演示了元素在屏幕上移动时大小和透明度的变化过程:

以下代码段展示了如何使用 Horologist 的 版本的 ScalingLazyColumn 布局来创建内容, 在各种 Wear OS 屏幕尺寸上都能呈现理想的视觉效果,例如,在 在下面的示例中,它会为第一个和最后一个元素添加必要的内边距 列表的样式(在 ScalingLazyColumnscrollState 中设置):

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}

添加贴靠和快速滑动效果

您可以向用户应用于 ScalingLazyColumn 对象的手指手势添加“贴靠和快速滑动”行为。此效果有助于用户更精确地浏览列表中的项,同时帮助用户更快地浏览长列表。

如需将此效果添加到 Horologist 的 ScalingLazyColumn 版本中,请执行以下操作: 将 columnStaterotaryMode 参数设为 RotaryWithSnap,如以下代码段所示:

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