comportement fillViewPort dans la colonne Jetpack Compose

Question

Existe-t-il quelque chose comme ScrollView fillViewPort dans Jetpack Compose Column ?

Voir cet exemple :

@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")
        }
    }
}

Voici le résultat :

Lorsque l'appareil est en mode paysage, le contenu est rogné, car il n'y a pas de défilement. Si j'ajoute l'élément verticalScroll font l'objet d'un Column ...

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

... le problème de défilement est résolu, mais le bouton remonte, comme ceci.

Dans la boîte à outils traditionnelle, nous pouvons corriger cela en utilisant ScrollView + fillViewPort propriété. Existe-t-il un équivalent à Compose ?

Answer 1

Il suffit de changer l'ordre des modificateurs pour que cela fonctionne... Merci à Abhishek Dewan (du canal Slack de Kotlin) !

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