视差滚动是一种背景内容和前景内容以不同速度滚动的技术。您可以实现此技术来增强应用的用户界面,为用户滚动时创造更具动态感的体验。
版本兼容性
此实现要求您的项目 minSDK 设置为 API 级别 21 或更高。
依赖项
创建视差效果
为了实现视差效果,您将滚动 composable 的滚动值的一部分应用于需要视差效果的 composable。以下代码段采用两个嵌套的视觉元素(一个图像和一个文本块),并以不同的速度朝同一方向滚动它们
@Composable fun ParallaxEffect() { fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) = layout { measurable, constraints -> val placeable = measurable.measure(constraints) val height = if (rate > 0) scrollState.value / rate else scrollState.value layout(placeable.width, placeable.height) { placeable.place(0, height) } } val scrollState = rememberScrollState() Column( modifier = Modifier .fillMaxWidth() .verticalScroll(scrollState), ) { Image( painterResource(id = R.drawable.cupcake), contentDescription = "Android logo", contentScale = ContentScale.Fit, // Reduce scrolling rate by half. modifier = Modifier.parallaxLayoutModifier(scrollState, 2) ) Text( text = stringResource(R.string.detail_placeholder), modifier = Modifier .background(Color.White) .padding(horizontal = 8.dp), ) } }
代码要点
- 创建自定义
layout
修饰符来调整 composable 的滚动速度。 - 的滚动速度比
Text
慢,从而在两个 composable 以不同速度垂直移动时产生视差效果。Image
结果
包含此指南的合集
本指南属于这些精心策划的快速指南合集,涵盖了更广泛的 Android 开发目标

显示列表或网格
列表和网格允许您的应用以视觉上令人愉悦且用户易于理解的形式显示合集。

显示图像
探索使用明亮、引人入胜的视觉效果来让您的 Android 应用拥有精美外观和感觉的技巧。

显示文本
文本是任何用户界面的核心部分。了解在应用中呈现文本的不同方式,以提供愉悦的用户体验。
有疑问或反馈
访问我们的常见问题页面,了解快速指南,或联系我们并告诉我们您的想法。