बॉटम शीट

Material Design 3 की मोडल बॉटम शीट का उदाहरण.

बॉटम शीट लागू करने के लिए, बॉटम शीट कंपोज़ेबल का इस्तेमाल किया जा सकता है.ModalBottomSheet

आप content स्लॉट का इस्तेमाल कर सकते हैं, जो शीट कॉन्टेंट कंपोज़ेबल को कॉलम में लेआउट करने के लिए ColumnScope का इस्तेमाल करता है:

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

प्रोग्राम के ज़रिए, शीट की स्थिति को कंट्रोल करना

प्रोग्राम के ज़रिए, शीट को बड़ा और छोटा करने के लिए, SheetState का इस्तेमाल करें. SheetState का इंस्टेंस बनाने के लिए, rememberModalBottomSheetState का इस्तेमाल किया जा सकता है. इसे sheetState पैरामीटर के साथ, ModalBottomSheet में पास करना ज़रूरी है. SheetState show और hide फ़ंक्शन के साथ-साथ, शीट की मौजूदा स्थिति से जुड़ी प्रॉपर्टी ऐक्सेस करने की सुविधा देता है. इन सस्पेंडिंग फ़ंक्शन के लिए, 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")
            }
        }
    }
}

Jetpack Compose में कॉन्टेंट दिखाने वाली मोडल बॉटम शीट.