Partie en bas de l'écran

Vous pouvez afficher partiellement une bottom sheet, puis laisser l'utilisateur la mettre en plein écran ou la fermer.

Pour ce faire, transmettez à votre ModalBottomSheet une instance de SheetState avec skipPartiallyExpanded défini sur false.

Exemple

Cet exemple montre comment utiliser la propriété sheetState de ModalBottomSheet pour n'afficher que partiellement la feuille au début :

@Composable
fun PartialBottomSheet() {
    var showBottomSheet by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false,
    )

    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(
            onClick = { showBottomSheet = true }
        ) {
            Text("Display partial bottom sheet")
        }

        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = Modifier.fillMaxHeight(),
                sheetState = sheetState,
                onDismissRequest = { showBottomSheet = false }
            ) {
                Text(
                    "Swipe up to open sheet. Swipe down to dismiss.",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}

Points clés concernant le code

Dans cet exemple, notez les points suivants :

  • showBottomSheet contrôle si l'application affiche la bottom sheet.
  • sheetState est une instance de SheetState où skipPartiallyExpanded est faux.
  • ModalBottomSheet utilise un modificateur qui lui permet de remplir l'écran lorsqu'il est entièrement développé.
  • ModalBottomSheet utilise sheetState comme valeur pour son paramètre sheetState.
    • Par conséquent, la feuille ne s'affiche que partiellement à la première ouverture. L'utilisateur peut ensuite la faire glisser ou la balayer pour la mettre en plein écran ou la fermer.
  • Le lambda onDismissRequest contrôle ce qui se passe lorsque l'utilisateur tente de fermer la bottom sheet. Dans ce cas, il ne supprime que la feuille.

Résultats

Lorsque l'utilisateur appuie sur le bouton pour la première fois, la feuille s'affiche partiellement :

Une bottom sheet qui ne remplit qu'une partie de l'écran au départ. L'utilisateur peut balayer l'écran pour le remplir avec l'image ou la fermer.
Figure 1. Bottom sheet partiellement affichée.

Si l'utilisateur balaie la bottom sheet vers le haut, elle remplit l'écran :

Une bottom sheet que l'utilisateur a développée pour remplir l'écran.
Figure 2. Bottom sheet en plein écran.

Ressources supplémentaires