使用 Compose for Wear OS 的列表

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

许多 Wear OS 设备使用圆形屏幕，这使得查看出现在屏幕顶部和底部的列表项变得更加困难。为此，Compose for Wear OS 包含一个名为 ScalingLazyColumn 的 LazyColumn 类版本，它支持缩放和淡入淡出效果。当项目向屏幕中心移动时，它们会变得更大，不透明度也会更高。

以下动画显示元素的大小和透明度如何随着它在屏幕上的移动而发生变化

以下代码片段显示了如何使用 Horologist 的 ScalingLazyColumn 布局版本创建列表，以创建在各种 Wear OS 屏幕尺寸上看起来很棒的内容，例如在下面的示例中，它将在设置在 ScalingLazyColumn 的 scrollState 中的列表的第一个和最后一个元素中添加必要的填充。

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 = { }
            )
        }
    }
}
List.kt

添加快照和弹性效果

您可以将快照和弹性行为添加到用户对 ScalingLazyColumn 对象应用的手指手势。这种效果有助于用户更准确地浏览列表中的项目，同时也有助于他们更快地浏览长列表。

要将此效果添加到 Horologist 版本的 ScalingLazyColumn 中，请将 columnState 参数的 rotaryMode 设置为 RotaryWithSnap，如下面的代码片段所示。

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