Partie en bas de l'écran

Vous pouvez afficher partiellement une feuille inférieure, 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 afficher la feuille partiellement 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)
                )
            }
        }
    }
}
BottomSheet.kt

Points clés concernant le code

Dans cet exemple, notez les points suivants :

  • showBottomSheet contrôle si l'application affiche la feuille inférieure.
  • sheetState est une instance de SheetState où skipPartiallyExpanded est défini sur "false".
  • ModalBottomSheet accepte 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 sa 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 de fermer la feuille inférieure. Dans ce cas, elle 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 feuille vers le haut, elle remplit l'écran :

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

Ressources supplémentaires