android - 创建 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,
                )
            }
        }
    }

}

在这种情况下，我可以通过将 Surface weight 设置为 1F 来设置相同宽度的圆圈，但我需要设置取决于宽度的圆圈的高度。我被困住了如何做到这一点。

标签： androidandroid-jetpack-compose

Answer 1

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

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