גיליונות תחתונים

אם רוצים להטמיע גיליון תחתון, אפשר להשתמש תוכן קומפוזבילי ModalBottomSheet.

אפשר להשתמש במשבצת content, שמשתמשת ב-ColumnScope לפריסת הגיליון. תכנים קומפוזביליים של תוכן בעמודה:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}
MaterialLayoutSnippets.kt

הרחבה וכיווץ של הגיליון באופן פרוגרמטי מתבצעים באמצעות SheetState אפשר להשתמש ב-rememberSheetState כדי ליצור מופע של SheetState, שצריך להעביר אל ModalBottomSheet עם sheetState. האפליקציה SheetState מספקת גישה אל show וגם hide, וגם מאפיינים שקשורים לגיליון הנוכחי state. לפונקציות ההשעיה האלה נדרש CoroutineScope, לדוגמה, באמצעות rememberCoroutineScope — וניתן לקרוא לו בתגובה לממשק המשתמש אירועים. חשוב להסיר את ModalBottomSheet מהיצירה בזמן ההסתרה בגיליון התחתון.

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}
MaterialLayoutSnippets.kt