Search code examples
androidandroid-jetpack-composelazycolumnandroid-jetpack-compose-lazy-column

The IntrinsicSize is not updated in LazyColumn?


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: Correctly rendered MyList

Here is how it looks like:

Incorrectly rendered MyLazyList


Solution

  • 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.