How to fix LazyColumn Composable scrolling problem

Question

I'm trying to embed a horizontally scrollable table within a Composable. However whenever I engage horizontalScrolling the container goes 'blank', as shown. Also figured out that the container or LazyColumn itself has to have a .size to constrain the viewable width, is this normal?

Is it something to do with the column weights? As shown the column is either incorrectly squashed or haywire.

  LazyColumn(
            Modifier
                .padding(5.dp)
                .size(400.dp)
                //  this makes things go blank

.horizontalScroll(rememberScrollState())

        ) {
            item {
                Row(
                    Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceEvenly
                ) {
                    TableCell(
                        text = "Invoice",
                        weight = column1Weight,
                        alignment = TextAlign.Center,
                        title = true
                    )
                    TableCell(text = "Date", weight = column2Weight, title = true)
                    TableCell(text = "Status", weight = column3Weight, title = true)
                    TableCell(text = "Status", weight = column4Weight, title = true)
                    TableCell(text = "Status", weight = column5Weight, title = true)
                    TableCell(text = "Status", weight = column6Weight, title = true)


                }
                Divider(
                    color = Color.LightGray,
                    modifier = Modifier
                        .height(1.dp)
                        .fillMaxHeight()
                        .fillMaxWidth()
                )
            }


            itemsIndexed(invoiceList) { _, invoice ->
                Row(
                    Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    TableCell(
                        text = invoice.invoice,
                        weight = column1Weight,
                        alignment = TextAlign.Center
                    )
                    TableCell(text = invoice.date, weight = column2Weight, alignment = TextAlign.Center)
                    TableCell(text = invoice.status, weight = column3Weight)
                    TableCell(
                        text = invoice.amount,
                        weight = column4Weight,
                        alignment = TextAlign.Center
                    )
                    TableCell(text = invoice.filler, weight = column5Weight)
                    TableCell(text = invoice.killer, weight = column6Weight)
                }
                Divider(
                    color = Color.LightGray,
                    modifier = Modifier
                        .height(1.dp)
                        .fillMaxHeight()
                        .fillMaxWidth()
                )
            }


        }
    }

    Spacer(modifier = Modifier
        .fillMaxWidth()
        .size(20.dp))

    // second table
}
@Composable
fun RowScope.TableCell(
    text: String,
    weight: Float,
    alignment: TextAlign = TextAlign.Center,
    title: Boolean = false
) {
    Text(
        text = text,
        Modifier
            .weight(weight)
            .padding(10.dp)

        ,
        fontWeight = if (title) FontWeight.Bold else FontWeight.Normal,
        textAlign = alignment,
        color = Color.White
    )
}

PioSwi · Accepted Answer · 2023-07-12T13:23:00.070

Although I do not know what values are behind your columnWeight variables I think the weights are the issue. You have defined a horizontal scrollable LazyColumn, which means its width is undefined. But you also defined a weight for your TableCells which means each TableCell takes x% space of the max width.

But as the width of the Lazycolumn is undefined the application does not know how big the Tablecells should be (x% of undefined = ?)

Try to replace the weights with a fixed width for your cells. And you do not need to set a size for your LazyColumn.

Here a small basic example:

@Composable
fun TestView() {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .horizontalScroll(rememberScrollState())
            .background(Color.DarkGray)
    ) {
        items(count = 10) {
            Row {
                repeat(10) {
                    Box(
                        modifier = Modifier
                            .padding(10.dp)
                            .size(50.dp)
                            .background(color = Color.Yellow)
                    )
                }
            }
        }
    }
}

How to fix LazyColumn Composable scrolling problem

1 Answers1