Riquadro inferiore parziale

Puoi mostrare parzialmente un foglio inferiore e poi lasciare che l'utente lo metta a schermo intero o lo chiuda.

Per farlo, passa ModalBottomSheet un'istanza di SheetState con skipPartiallyExpanded impostato su false.

Esempio

Questo esempio mostra come utilizzare la proprietà sheetState di ModalBottomSheet per visualizzare il foglio solo parzialmente all'inizio:

@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

Punti chiave del codice

In questo esempio, tieni presente quanto segue:

  • showBottomSheet controlla se l'app mostra il riquadro inferiore.
  • sheetState è un'istanza di SheetState dove skipPartiallyExpanded è false.
  • ModalBottomSheet accetta un modificatore che garantisce che riempia lo schermo quando è completamente espanso.
  • ModalBottomSheet accetta sheetState come valore per il parametro sheetState.
    • Di conseguenza, il foglio viene visualizzato solo parzialmente alla prima apertura. L'utente può quindi trascinarlo o scorrerlo per visualizzarlo a schermo intero o chiuderlo.
  • La lambda onDismissRequest controlla cosa succede quando l'utente tenta di chiudere il foglio inferiore. In questo caso, viene rimosso solo il foglio.

Risultati

Quando l'utente preme il pulsante per la prima volta, il foglio viene visualizzato parzialmente:

Un foglio inferiore che inizialmente occupa solo una parte dello schermo. L'utente può scorrere per riempire lo schermo o chiuderlo.
Figura 1. Riquadro inferiore visualizzato parzialmente.

Se l'utente scorre verso l'alto sul foglio, questo riempie lo schermo:

Un riquadro inferiore che l'utente ha espanso per riempire lo schermo.
Figura 2. Foglio inferiore a schermo intero.

Risorse aggiuntive