How to make a LazyRow of elements that occupy each the whole screen width?

Question

The following doesn't work. When I scroll, the width of the first panel fluctuates.

compose version = 1.0.0-beta01

@Composable
fun Carousel() {
    val panels = listOf(Pair("cat", Color.Blue), Pair("dog", Color.Cyan), Pair("snake", Color.Green))

    LazyRow(
        modifier = Modifier
            .fillMaxSize()
    ) {
        items(panels) { panel ->
            Column(
                modifier = Modifier
                    .fillParentMaxSize()
                    .background(panel.second),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = panel.first
                )
            }
        }
    }
}

score 10 · Answer 1 · answered Mar 10 '21 at 05:04

10

Replace fillParentMaxSize() with fillParentMaxWidth() and it will work as expected.

answered Mar 10 '21 at 05:04

Amirhosein

1,048
7
19

score 2 · Accepted Answer · answered Mar 15 '21 at 12:22

2

It should work, it has been accepted as a bug.

See https://issuetracker.google.com/issues/182490045

answered Mar 15 '21 at 12:22

nociceptus

71
1
6

How to make a LazyRow of elements that occupy each the whole screen width?

2 Answers2