बॉटम शीट

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

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

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

प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस के ज़रिए शीट की स्थिति कंट्रोल करना

प्रोग्राम के हिसाब से शीट को बड़ा और छोटा करने के लिए, SheetState का इस्तेमाल करें. SheetState का एक इंस्टेंस बनाने के लिए, rememberSheetState का इस्तेमाल किया जा सकता है. इसे 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")
            }
        }
    }
}
MaterialLayoutSnippets.kt