I am trying to create a layout in Compose that's consisting of a LazyColumn
. Each item in this list is consisting of a row with two columns. Both columns are clickable and should be the height of the higher column, so that the touch target spans the whole row height. When using IntrinsicSize.Min
on my Row
as indicated in the documentation
it seems to work initially, but when scrolling up and down the heights are wrong and cut off the text or are far too large.
I also tried it with Column
instead of LazyColumn
and there it works.
The code I used:
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color.Companion.Gray
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
// Renders incorrectly after scrolling down and back up
@Preview
@Composable
private fun MyLazyList() {
LazyColumn {
items(count = 100) {
MyItem(it * 4)
}
}
}
// Renders correctly, but not lazy
@Preview
@Composable
private fun MyList() {
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
repeat(100) {
MyItem(it * 4)
}
}
}
@Composable
private fun MyItem(id: Int) {
val title = getTitle(id)
Row(
Modifier
.height(IntrinsicSize.Min)
.border(1.dp, Gray)
) {
Column(
Modifier
.weight(1.0f)
.clickable { }) {
Text(title)
}
Column(
Modifier
.width(48.dp)
.fillMaxHeight()
.clickable { },
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = id.toString())
}
}
}
// length of title increasing with id for demo purposes
fun getTitle(id: Int): String = (0..id).toList().joinToString { it.toString() }
Here is how it should look like:
Here is how it looks like:
I updated the androidx.compose.material3:material3
version (where the Text widget comes from) to the current alpha release (1.2.0-alpha07
) and now it works without any problems. So this was apparently a bug from that library and not from my code.