CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
Syorito Hatsuki
Syorito Hatsuki

Reputation: 104

Kotlin Compose text row same height

Problem

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.

Answer

Not found yet

XML Code: https://gist.github.com/syorito-hatsuki/1cabf883c3b65ae52f87f71c0e26f6a0

enter image description here

Compose Code: https://gist.github.com/syorito-hatsuki/a2fcaf94cd446f37b13317c7d7b7f170

enter image description here

Upvotes: 0

Views: 664

Answers (1)

nEx.Software
nEx.Software

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:

Screen Capture

Upvotes: 4

Related Questions