如何在 Jetpack Compose 中使用按钮自定义进度条？

Question

我正在尝试在 Jetpack Compose 中做这样的自定义进度条。

当我左右滑动用户按钮时，它会以0.25的值增加和减少。第一个值为 0.25，最后一个值为 1，也就是说，它将由 4 个阶段组成。

这就是我做的

@Composable
fun CustomProgressBar() {

    var progress by remember { mutableStateOf(0.25f) }


    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .height(16.dp)
                    .background(Color.LightGray)
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth(progress)
                        .height(16.dp)
                        .background(DefaultDYTColor)
                )
            }
            Button(
                onClick = {
                    if (progress < 1f) {
                        progress += 0.25f
                    }
                }
            ) {
                Text("increase")
            }
        }
        Text(
            text = "$progress",
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
    }
}

这是错误的，但我想分享我的代码来至少解释我做了什么。

听到的是我的代码结果