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 à 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 la feuille qu'en partie 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 bottom sheet.
  • sheetState est une instance de SheetState où skipPartiallyExpanded est faux.
  • 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 la première ouverture. L'utilisateur peut ensuite le faire glisser ou 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 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 le remplir ou l'ignorer.
Figure 1. Bottom sheet partiellement affichée.

Si l'utilisateur balaie l'écran vers le haut, la feuille 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