बॉटम शीट
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
अगर आपको बॉटम शीट लागू करनी है, तो ModalBottomSheet
कंपोज़ेबल का इस्तेमाल किया जा सकता है.
content
स्लॉट का इस्तेमाल किया जा सकता है. यह ColumnScope
का इस्तेमाल करके, कॉलम में शीट के कॉन्टेंट कंपोज़ेबल को लेआउट करता है:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
// Sheet content
}
प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस के ज़रिए शीट की स्थिति कंट्रोल करना
प्रोग्राम के हिसाब से शीट को बड़ा और छोटा करने के लिए, SheetState
का इस्तेमाल करें. SheetState
का इंस्टेंस बनाने के लिए, rememberSheetState
का इस्तेमाल किया जा सकता है. इस इंस्टेंस को ModalBottomSheet
को पास किया जाना चाहिए. इसके लिए, sheetState
पैरामीटर का इस्तेमाल करें. 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")
}
}
}
}
इस पेज पर मौजूद कॉन्टेंट और कोड सैंपल कॉन्टेंट के लाइसेंस में बताए गए लाइसेंस के हिसाब से हैं. Java और OpenJDK, Oracle और/या इससे जुड़ी हुई कंपनियों के ट्रेडमार्क या रजिस्टर किए हुए ट्रेडमार्क हैं.
आखिरी बार 2025-08-28 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2025-08-28 (UTC) को अपडेट किया गया."],[],[],null,["If you want to implement a [bottom sheet](https://m3.material.io/components/bottom-sheets/overview), you can use the\n[`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1)) composable.\n\nYou can use the `content` slot, which uses a [`ColumnScope`](/reference/kotlin/androidx/compose/foundation/layout/ColumnScope) to layout sheet\ncontent composables in a column:\n\n\n```kotlin\nModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {\n // Sheet content\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L364-L366\n```\n\n\u003cbr /\u003e\n\nControl sheet state programmatically\n\nTo programmatically expand and collapse the sheet, use\n[`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState). You can use [`rememberSheetState`](/reference/kotlin/androidx/compose/material3/package-summary#rememberSheetState(kotlin.Boolean,kotlin.Function1)) to create an instance\nof `SheetState` that should be passed to `ModalBottomSheet` with the\n`sheetState` parameter. `SheetState` provides access to the [`show`](/reference/kotlin/androidx/compose/material3/SheetState#show()) and\n[`hide`](/reference/kotlin/androidx/compose/material3/SheetState#hide()) functions, as well as properties related to the current sheet\nstate. These suspending functions require a `CoroutineScope` --- for example,\nusing [`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) --- and you can call them in response to UI\nevents. Make sure to remove the `ModalBottomSheet` from composition upon hiding\nthe bottom sheet.\n\n\n```kotlin\nval sheetState = rememberModalBottomSheetState()\nval scope = rememberCoroutineScope()\nvar showBottomSheet by remember { mutableStateOf(false) }\nScaffold(\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show bottom sheet\") },\n icon = { Icon(Icons.Filled.Add, contentDescription = \"\") },\n onClick = {\n showBottomSheet = true\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n\n if (showBottomSheet) {\n ModalBottomSheet(\n onDismissRequest = {\n showBottomSheet = false\n },\n sheetState = sheetState\n ) {\n // Sheet content\n Button(onClick = {\n scope.launch { sheetState.hide() }.invokeOnCompletion {\n if (!sheetState.isVisible) {\n showBottomSheet = false\n }\n }\n }) {\n Text(\"Hide bottom sheet\")\n }\n }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L370-L408\n```\n\n\u003cbr /\u003e"]]