Как добиться такого макета с помощью динамических высот разделителя в Jetpack Compose? ⇐ Android

[Anonymous]

Я хочу получить макет, показанный ниже, с двумя вертикальными разделителями и кругом в столбце. Вот мой код:

Код: Выделить всё

Box(
modifier = Modifier.zIndex(100 - dataModel.currentStep.toFloat())
) {
Row(
Modifier
.background(color = Color.Green)
.padding(8.dp)
.fillMaxWidth()
.height(IntrinsicSize.Max)
) {
Column(Modifier.fillMaxHeight(), horizontalAlignment = Alignment.CenterHorizontally) {
Divider(modifier = Modifier.width(2.dp), color = Color.Black)
Circle()
Divider(modifier = Modifier.width(2.dp), color = Color.Black)
}
}
}

@Composable
fun Circle() {
Box(
modifier = Modifier
.size(24.dp)
.background(color = colorResource(R.color.turquoise).copy(alpha = 0.3f), CircleShape)
) {
Box(
modifier = Modifier
.size(12.dp)
.align(Alignment.Center)
.background(color = colorResource(R.color.turquoise), CircleShape)
)
}
}

Как заставить разделители занимать необходимое пространство по вертикали, не задавая им определенную высоту, поскольку я хочу, чтобы это было динамично?



Подробнее здесь: https://stackoverflow.com/questions/786 ... ck-compose