如何实现一个进度条像动画到第二个矩形,以及控制动画如start&pause
@Composable
fun ProgressBar(modifier: Modifier = Modifier.size(300.dp, 180.dp)) {
Canvas(modifier = modifier.fillMaxSize().padding(16.dp)) {
val canvasWidth = size.width
val canvasHeight = size.height
val canvasSize = size
val percentage = 0.2F
drawRoundRect(
color = Pink80,
topLeft = Offset(x = 0F, y = 0F),
size = Size(canvasSize.width, 55F),
cornerRadius = CornerRadius(60F, 60F),
)
drawRoundRect(
color = Purple40,
topLeft = Offset(x = 0F, y = 0F),
size = Size(canvasWidth * 0.2F , 55F),
cornerRadius = CornerRadius(60F, 60F),
)
}
}
2条答案
按热度按时间kuarbcqp1#
这里有两个解决方案。第一个使用Compose自己的
LinearProgressIndicator
。第二个是自定义的。它非常简单,而且有一个优点,你可以很容易地自定义它。不需要使用画布。当进度条达到最大值时,代码会将其值重置为零,但您可以通过不重置该值来将其设置为100%。LaunchedEffect仅用于模拟更新值。在生产应用中,您不会使用此功能,而是使用与代码的业务逻辑一致的其他方法来更新值...
线性进度指示器:
请参阅:线性进展指示符
自定义进度指示器:
brjng4g32#
https://github.com/DogusTeknoloji/compose-progress
你可以检查这个库,因为支持动画,也步进度。