kotlin 我如何自定义进度条与按钮在喷气背包组成？

6vl6ewon 于 2023-05-18 发布在 Kotlin

关注(0)|答案(1)|浏览(106)

我正试图做这样的自定义进度条在喷气背包组成。

当我左右滑动用户按钮时，它将随值增加和减少第一个值将是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)
        )
    }
}

这是错误的，但我想分享我的代码来解释我做了什么。
听到是我的代码结果

kotlin

来源：https://stackoverflow.com/questions/76266415/how-can-i-custom-progress-bar-with-button-in-jetpack-compose

1条答案

按热度按时间

6pp0gazn1#

可以使用Slider。使用M3（androidx.compose.material3.Slider），您可以使用**thumb**属性应用自定义拇指。
类似于：

var sliderPosition by remember { mutableStateOf(0f) }
    val interactionSource = MutableInteractionSource()

    Column {

        Slider(
            modifier = Modifier.semantics { contentDescription = "Localized Description" },
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            valueRange = 0f..1f,
            steps = 3,
            interactionSource = interactionSource,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
            },
            thumb = {
                val shape = RoundedCornerShape(4.dp)
                Box(
                    modifier = Modifier
                        .size(70.dp,25.dp)
                        .indication(
                            interactionSource = interactionSource,
                            indication = rememberRipple(
                                bounded = false,
                                radius = 20.dp
                            )
                        )
                        .hoverable(interactionSource = interactionSource)
                        .background(Blue200, shape),
                    contentAlignment = Alignment.Center
                ){
                    Text(sliderPosition.toString() +"Kg")
                }
            },
        )
    }

赞(0）回复(0）举报 2023-05-18

我来回答

kotlin 我如何自定义进度条与按钮在喷气背包组成？

1条答案

相关问题

热门标签

最新问答