Riquadro inferiore parziale

Puoi mostrare parzialmente un riquadro inferiore e poi consentire all'utente di visualizzarlo a schermo intero o chiuderlo.

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)
                )
            }
        }
    }
}

Punti chiave sul codice

In questo esempio, tieni presente quanto segue:

  • showBottomSheet controlla se l'app mostra il riquadro inferiore.
  • sheetState è un'istanza di SheetState in cui 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 scorrere per visualizzarlo a schermo intero o chiuderlo.
  • La funzione lambda onDismissRequest controlla cosa succede quando l'utente tenta di chiudere il riquadro 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 con la scheda o ignorarla
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. Riquadro inferiore a schermo intero.

Risorse aggiuntive