fillViewPort behavior in Jetpack Compose Column

user_1094333 0
Viewed 2335

Is there something like ScrollView fillViewPort in Jetpack Compose Column?

See this example:

@Composable
fun FillViewPortIssue() {
    Column(
        Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        for (i in 0..5) {
            Box(
                modifier = Modifier
                    .padding(vertical = 8.dp)
                    .background(Color.Red)
                    .fillMaxWidth()
                    .height(72.dp)
            )
        }
        Spacer(modifier = Modifier.weight(1f))
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = { /*TODO*/ }
        ) {
            Text("Ok")
        }
    }
}

This is the result:

enter image description here

When the device is in landscape, the content is cropped, because there's no scroll. If I add the verticalScroll modifier do the Column...

    ...
    Column(
        Modifier
            .verticalScroll(rememberScrollState()) // <<-- this
            .fillMaxSize()
            .padding(16.dp)
    ) {
    ...

... the scroll problem is fixed, but the button goes up, like this.

enter image description here

In the traditional toolkit, we can fix this using ScrollView + fillViewPort property. Is there something equivalent to Compose?

android-jetpack-compose android
2 Answers

Just change the order of the modifiers worked... Thanks to Abhishek Dewan (from Kotlin Slack channel)!

Column(
    Modifier
        .fillMaxSize() // first, set the max size
        .verticalScroll(rememberScrollState()) // then set the scroll
) {
user_10943330

I had a similar issue recently and substituted verticalScroll for scrollable(rememberScrollState(), Orientation.Vertical) which seemed to work for my case and allow the screen to fill its viewport while allowing scrolling

user_115415120
Related