创建 Jetpack Compose Row，其中包含 10 个圆圈，具体取决于行宽度

Question

我需要做这样的事情：

这是 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 来设置相同的圆圈宽度，但我需要根据宽度设置该圆圈的高度。我不知道该怎么做。

Answer 1

您可以使用aspectRatio修饰符。将您的期望值应用于属性
。ratio

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