Compose for Wear OS 的列表功能

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

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

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

以下代码段展示了如何创建包含每个项的文本的列表:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

添加“贴靠和快速滑动”效果

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

如需将此效果添加到应用中的列表或选择器,请在 ScalingLazyColumn 定义中添加 flingBehavior 参数,如以下代码段所示:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

若要在用户与旋转输入拨盘互动时对 ScalingLazyColumn 应用类似的“贴靠和快速滑动”行为,请使用 RotaryWithSnap(可在 GitHub 上的 Horologist 中找到)。