Riquadro inferiore parziale

Puoi mostrare parzialmente un riquadro inferiore e poi consentire all'utente di visualizzarlo 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 sul codice

In questo esempio, tieni presente quanto segue:

  • showBottomSheet consente di stabilire se visualizzare o meno il riquadro inferiore nell'app.
  • sheetState è un'istanza di SheetState in cui skipPartiallyExpanded è falso.
  • ModalBottomSheet utilizza un modificatore che riempie lo schermo quando viene completamente espanso.
  • ModalBottomSheet prende sheetState come valore per il parametro sheetState.
    • Di conseguenza, il foglio viene visualizzato solo parzialmente alla prima apertura. L'utente può quindi trascinarla o farla scorrere per visualizzare la schermata a schermo intero o ignorarla.
  • La funzione lambda onDismissRequest controlla cosa succede quando l'utente prova a 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 riempie solo parte dello schermo. L'utente può scorrere per riempire lo schermo o chiuderla
Figura 1. Riquadro inferiore parzialmente visualizzato.

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

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

Risorse aggiuntive