Блог

Мне нужно сделать что-то вроде этого:

Это 10 видов кругов, которые имеют одинаковую ширину, которая зависит от родительской ширины.

Что у меня есть сейчас:

 Column(
    modifier = Modifier
        .fillMaxWidth()
        .background(color = Color.White)
        .padding(vertical = 12.dp)
) {

    Row(
        modifier = Modifier
            .padding(horizontal = 20.dp)
            .padding(top = 12.dp)
    ) {

        for (i in 1..10) {
            Surface(
                shape = CircleShape,
                modifier = Modifier
                    .padding(horizontal = 2.dp)
                    .width(0.dp)
                    .height(29.dp)
                    .weight(1F)
                    .clip(CircleShape),
                color = surfaceColor,
                onClick = { selected = i },
            ) {

                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentSize(Alignment.Center),
                    text = "$i",
                    color = textColor,
                    style = subtitle1(),
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }

}
 

В этом случае я могу установить одинаковую ширину кругов, установив вес поверхности на 1F, но мне нужно установить высоту этих кругов, которая зависит от ширины. Я не знаю, как это сделать.

Вы можете использовать aspectRatio модификатор.
Примените к ratio атрибуту ваше ожидаемое значение.

    Surface(
        shape = CircleShape,
        modifier = Modifier
            .padding(horizontal = 2.dp)
            .width(0.dp)
            .weight(1F)
            .aspectRatio(1f)