如何在 Compose 中调整项目大小而不改变比例？

Question

我对 Compose 相当陌生，所以我的问题可能非常微不足道，但是，这就是发生的事情。

我正在尝试创建一个包含 14 个元素的网格应用程序。 14 张卡片，里面有固定比例。

这是我们拥有的最长的文本，因此您可以看出尺寸不会丢失并且文本不会溢出

我想保持与将其与所有其他元素放在水平网格中时相同的比例，但是当我这样做时，尺寸会立即变得混乱，而不是调整尺寸以适应屏幕。

这就是我得到的^^^^ 这就是我想要得到的 ˘˘˘˘˘

这是我的网格和卡片的代码：

    val number = topic.numbers.toString()
    Card{

Row {


            Image(painter = painterResource(topic.image), contentDescription = stringResource(topic.name),
                modifier
                    .size(68.dp)
                    .fillMaxHeight())
       Column(modifier.width(120.dp)){Text(LocalContext.current.getString(topic.name),
            modifier = modifier
                .padding(horizontal = 16.dp)
               .padding(top = 16.dp)
               .padding(bottom = 8.dp)
            ,style = MaterialTheme.typography.bodyMedium)

Row(modifier = Modifier,
    horizontalArrangement = Arrangement.End
){
    Icon(painterResource(R.drawable.ic_grain), contentDescription = "few dots",
        Modifier
            .padding(start = 16.dp)
            .padding(end = 8.dp))
    Text((number), modifier)

}
       }

}
    }
}


@Composable

fun GridList(gridList: List<Topic>, modifier: Modifier){
    LazyHorizontalGrid(rows = GridCells.Fixed(7), verticalArrangement = Arrangement.spacedBy(8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        items(topics) { topic ->
            Topics(topic = topic, modifier = Modifier.padding(8.dp))
        }

    }

Answer 1

请查看 LazyVerticalGrid

 和 

LazyHorizontalGrid

 的 

文档：

惰性垂直网格将在垂直可滚动容器中显示其项目，跨越多个列，而惰性水平网格将在水平轴上具有相同的行为。

目前还不太清楚你想要实现什么。但在您当前的解决方案中，您将拥有

• 网格
• 7行
• 水平滚动。

由于

LazyHorizontalGrid

根据定义可水平滚动，因此您不能强制项目适应屏幕的宽度。如果它们太宽而无法容纳屏幕，屏幕将仅启用水平滚动。

看来你更想要一个

LazyVerticalGrid

。您可以按如下方式实现：

LazyVericalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(topics) { topic ->
        Topics(topic = topic, modifier = Modifier.padding(8.dp))
    }
}