Riquadro inferiore parziale

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

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 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 sul codice

In questo esempio, tieni presente quanto segue:

• showBottomSheet controlla se l'app visualizza 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 accade quando l'utente tenta di chiudere il riquadro inferiore. In questo caso, rimuove solo il foglio.

Risultati

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

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

Risorse aggiuntive

• Bottom sheet