Reputation: 104
I have the origin layout as XML. And I need to do the same on Compose. But the text does not work as required.
I tried using aspect ratio but it eat text and left too many spaces. The line limiting and text cutting are not what I need as answers.
Not found yet
XML Code: https://gist.github.com/syorito-hatsuki/1cabf883c3b65ae52f87f71c0e26f6a0
Compose Code: https://gist.github.com/syorito-hatsuki/a2fcaf94cd446f37b13317c7d7b7f170
Upvotes: 0
Views: 664
Reputation: 6882
After taking a look at your code and seeing the docs on LazyVerticalGrid, I opted to ditch LazyVerticalGrid and just go with LazyColumn and build rows myself. Here's what I came up with, which I think captures the spirit of what you're going for:
@Preview
@Composable
fun Example() {
val items = (1 until 25).toList()
BoxWithConstraints(
Modifier.padding(16.dp)
) {
val cols = maxOf((maxWidth / 128.dp).toInt(), 1)
val rows = items.chunked(cols)
LazyColumn(
verticalArrangement = Arrangement.spacedBy(4.dp)
) {
items(rows) {
Row(
Modifier.height(IntrinsicSize.Min),
horizontalArrangement = Arrangement.spacedBy(4.dp)
) {
it.forEach {
Card(
Modifier
.fillMaxHeight()
.weight(1f)) {
Column() {
// Replace box with your AsyncImage
Box(Modifier.fillMaxWidth().height(265.dp).background(Color.DarkGray))
Text("Text $it\n".repeat(it * 2).trim(), Modifier.padding(8.dp).fillMaxSize().wrapContentHeight())
}
}
}
}
}
}
}
}
Here's what it looks like:
Upvotes: 4