下面是一个使用Compose构建的水平进度条示例:
@Composable
fun HorizontalProgressBar(
progress: Float,
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colors.primary,
backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.08f)
) {
Box(
modifier = modifier
.background(color = backgroundColor)
.fillMaxWidth()
.height(4.dp)
) {
Spacer(
modifier = Modifier
.background(color = color)
.fillMaxHeight()
.width(with(LocalDensity.current) { progress.toDp() })
)
}
}
使用它,您可以通过以动画方式更改0.0f到1.0f的进度来轻松创建动画效果。要实现动画,您可以使用Animatable
类,在onActive
回调中启动动画。以下是一个示例:
@Composable
fun HorizontalProgressBarWithAnimation(
durationMillis: Int = 1000,
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colors.primary,
backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.08f)
) {
val animatedProgress = remember { Animatable(0f) }
LaunchedEffect(animatedProgress) {
animatedProgress.animateTo(
targetValue = 1f,
animationSpec = TweenSpec(durationMillis)
)
}
HorizontalProgressBar(
progress = animatedProgress.value,
modifier = modifier,
color = color,
backgroundColor = backgroundColor
)
}
使用此示例,您可以将durationMillis
参数设置为所需的动画持续时间(以毫秒为单位)。 然后,当组合在屏幕上时,此进度条将从0.0开始,动画地增长到1.0。