在 Wear OS 设备上,用户可通过列表从一组选项中选择一个项目。
许多 Wear OS 设备都使用圆形屏幕,不方便用户查看靠近屏幕顶部和底部的列表项。因此,Compose for Wear OS 包含一个名为 ScalingLazyColumn
的 LazyColumn
类版本,该版本支持缩放和淡出效果。当项目向屏幕中心移动时,便会变大且更不透明。
以下动画演示了元素在屏幕上移动时大小和透明度的变化过程:
以下代码段展示了如何创建包含每个项的文本的列表:
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 中找到)。
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- Compose for Wear OS Codelab
- 列表和网格
- 在 Compose 中使用 View