Riquadro inferiore parziale

Puoi mostrare parzialmente un riquadro in basso e poi consentire all'utente di aprirlo in modalità a schermo intero o di ignorarlo.

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

Esempio

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

@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 foglio inferiore.
  • sheetState è un'istanza di SheetState in cui skipPartiallyExpanded è falso.
  • ModalBottomSheet accetta un modificatore che garantisce che l'elemento riempia lo schermo quando è completamente espanso.
  • ModalBottomSheet accetta sheetState come valore per il suo parametro sheetState.
    • Di conseguenza, il foglio viene visualizzato solo parzialmente alla prima apertura. L'utente può quindi trascinarlo o scorrere 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 riquadro inferiore che inizialmente occupa solo una parte dello schermo. L'utente può scorrere per riempire lo schermo o chiuderla
Figura 1. Riquadro inferiore visualizzato parzialmente.

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

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

Risorse aggiuntive