kotlin 如何在Jetpack Compose中设置矩形动画(如进度条)

3lxsmp7m  于 2022-11-25  发布在  Kotlin
关注(0)|答案(2)|浏览(228)

如何实现一个进度条像动画到第二个矩形,以及控制动画如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),
        )
    }
}

kuarbcqp

kuarbcqp1#

这里有两个解决方案。第一个使用Compose自己的LinearProgressIndicator。第二个是自定义的。它非常简单,而且有一个优点,你可以很容易地自定义它。
不需要使用画布。当进度条达到最大值时,代码会将其值重置为零,但您可以通过不重置该值来将其设置为100%。LaunchedEffect仅用于模拟更新值。在生产应用中,您不会使用此功能,而是使用与代码的业务逻辑一致的其他方法来更新值...

线性进度指示器:

请参阅:线性进展指示符

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        startActivity(intent)

        setContent {
            var enabled by remember { mutableStateOf(false) }
            var progress by remember { mutableStateOf(0.1f) }
            val animatedProgress by animateFloatAsState(
                targetValue = progress,
            )

            LaunchedEffect(enabled) {
                while ((progress < 1) && enabled) {
                    progress += 0.005f
                    delay(10)
                }
            }

            if (progress >= 1f) {
                enabled = false
            }

            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(20.dp), horizontalAlignment = Alignment.CenterHorizontally
            ) {
                LinearProgressIndicator(progress = animatedProgress, modifier = Modifier.requiredHeight(20.dp))
                Spacer(Modifier.requiredHeight(30.dp))

                Button(
                    onClick = {
                        enabled = !enabled
                    }
                ) {
                    if (enabled) {
                        Text("Pause")
                    } else {
                        Text("Start")
                    }
                }
            }
        }
    }
}

自定义进度指示器:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        startActivity(intent)

        setContent {
            var enabled by remember { mutableStateOf(false) }.apply { this.value }
            var progressValue by remember { mutableStateOf(0) }

            LaunchedEffect(enabled) {
                while ((progressValue < 100) && enabled) {
                    progressValue++
                    delay(10)
                }

                if (progressValue == 100) {
                    enabled = false
                    progressValue = 0
                }
            }

            Column(modifier = Modifier.fillMaxSize().padding(20.dp)) {
                ProgressBar(value = progressValue)

                Button(
                    onClick = {
                        enabled = !enabled
                    }
                ) {
                    if (enabled) {
                        Text("Pause")
                    } else {
                        Text("Start")
                    }
                }
            }
        }
    }
}

@Composable
fun ProgressBar(
    value: Int
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .requiredHeight(20.dp)
            .border(width = 1.dp, color = Color.Black)
    ) {

        Box(
            modifier = Modifier
                .fillMaxWidth(value.toFloat() / 100f)
                .fillMaxHeight()
                .background(color = Color.Red)
        ) {
        }
    }
}
brjng4g3

brjng4g32#

https://github.com/DogusTeknoloji/compose-progress
你可以检查这个库,因为支持动画,也步进度。

相关问题