列表允许用户在 Wear OS 设备上从一组选项中选择一个项目。
许多 Wear OS 设备使用圆形屏幕,这使得查看屏幕顶部和底部附近的列表项变得更加困难。因此,Compose for Wear OS 包含一个 LazyColumn
类的版本,名为 TransformingLazyColumn
,它支持缩放和变形动画。当项目移动到边缘时,它们会变小并逐渐消失。
为了添加缩放和滚动效果,请使用 Modifier.transformedHeight
让 Compose 计算项目在屏幕上滚动时的身高变化,并使用 transformation = SurfaceTransformation(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, ) } } } }
添加快速滑动效果
如果您需要添加快速滑动行为,我们建议使用ScalingLazyColumn
。此效果可帮助用户更精确地浏览列表中的项目,同时也能帮助他们更快地浏览长列表。要将此效果添加到 Horologist 版本的 ScalingLazyColumn
中,请将 columnState
的 rotaryMode
参数设置为 RotaryWithSnap
,如以下代码段所示
val columnState = rememberResponsiveColumnState( // ... // ... rotaryMode = ScalingLazyColumnState.RotaryMode.Snap ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { // ... // ... } }
为您推荐
- 注意:当 JavaScript 关闭时,会显示链接文本
- Compose for Wear OS Codelab
- 列表和网格
- 在 Compose 中使用 Views