Partie en bas de l'écran

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

Pour ce faire, transmettez à 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 dans un premier temps:

@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)
                )
            }
        }
    }
}
BottomSheet.kt

Points clés concernant le code

Dans cet exemple, notez les points suivants:

  • showBottomSheet détermine si l'application affiche ou non la bottom sheet.
  • sheetState est une instance de SheetState où skipPartiallyExpanded est défini sur "false".
  • ModalBottomSheet utilise un modificateur qui garantit qu'il remplit 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 lors de la première ouverture. L'utilisateur peut ensuite le faire glisser ou le balayer pour l'afficher en plein écran ou le fermer.
  • Le lambda onDismissRequest contrôle ce qui se passe lorsque l'utilisateur tente d'ignorer la bottom sheet. Dans ce cas, seule la feuille est supprimée.

Résultats

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

Bottom sheet qui ne remplit initialement qu'une partie de l'écran. L'utilisateur peut balayer l'écran pour remplir l'écran ou le fermer.
Figure 1. Bottom sheet partiellement affichée.

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

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

Ressources supplémentaires