साथ काम करने वाले पैनल का कैननिकल लेआउट, उपयोगकर्ता का ध्यान आपके ऐप्लिकेशन के मुख्य हिस्से पर फ़ोकस करता है कॉन्टेंट बनाने के साथ-साथ, उसके काम के कॉन्टेंट को भी दिखाया जा सकता है. उदाहरण के लिए, मुख्य कॉन्टेंट पैनल में हाल ही की फ़िल्म की जानकारी दिख सकती है. इसके लिए, पैनल में ऐसी दूसरी फ़िल्मों की सूची दिखती है जो मिलती-जुलती या एक जैसी थीम पर आधारित होती हैं निर्देशक या कलाकार हैं. सहायक पैनल के बारे में ज़्यादा जानकारी के लिए कैननिकल लेआउट है, तो पैनल के साथ काम करने वाले 3 पैनल से जुड़े दिशा-निर्देश.
सहायक पैनल को लागू करना
SupportingPaneScaffold
में ज़्यादा से ज़्यादा तीन चीज़ें शामिल होती हैं
पैनल: एक मुख्य पैनल, एक सहायक पैनल, और एक वैकल्पिक अतिरिक्त पैनल. स्कैफ़ोल्ड
यह विंडो स्पेस को तीन पैनलों में बांटने के लिए, सभी कैलकुलेशन करता है. चालू है
बड़ी स्क्रीन पर, स्कैफ़ोल्ड में मुख्य पैनल दिखता है. साथ ही, स्क्रीन के ऊपर वाला पैनल चालू होता है
किनारे पर हैं. छोटी स्क्रीन पर, स्कैफ़ोल्ड में मुख्य स्क्रीन होती है
फ़ुल स्क्रीन मोड में खोलें.
![मुख्य कॉन्टेंट, स्क्रीन के ज़्यादातर हिस्से पर दिख रहा है. साथ ही, इसमें अन्य कॉन्टेंट भी दिख रहा है.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=5&hl=hi)
डिपेंडेंसी जोड़ें
SupportingPaneScaffold
इसमें शामिल है:
मटीरियल 3 अडैप्टिव लेआउट लाइब्रेरी.
अपनी build.gradle
फ़ाइल में इन तीन संबंधित डिपेंडेंसी को जोड़ें
ऐप्लिकेशन या मॉड्यूल:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
ग्रूवी
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- अडैप्टिव — लो-लेवल बिल्डिंग ब्लॉक, जैसे कि
HingeInfo
औरPosture
- अडैप्टिव लेआउट — अडैप्टिव लेआउट, जैसे कि
SupportingPaneScaffold
- ज़रूरत के हिसाब से नेविगेशन — अलग-अलग जगहों पर नेविगेट करने और नेविगेट करने के लिए कंपोज़ेबल पैनल के बीच
नेविगेटर और स्कैफ़ोल्ड बनाएं
छोटी विंडो में, एक बार में सिर्फ़ एक पैनल दिखता है. इसलिए,
दूसरी जगह ले जाने और आने-जाने के लिए ThreePaneScaffoldNavigator
पैनल. इसके साथ नेविगेटर का एक इंस्टेंस बनाएं
rememberSupportingPaneScaffoldNavigator
.
पिछले जेस्चर इस्तेमाल करने के लिए, BackHandler
का इस्तेमाल करें.
canNavigateBack()
और कॉल
navigateBack()
:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
मचान बनाने के लिए PaneScaffoldDirective
की ज़रूरत होती है, जो
यह कंट्रोल करता है कि स्क्रीन को कैसे बांटना है और कितना स्पेस इस्तेमाल करना है. साथ ही,
ThreePaneScaffoldValue
, जिससे मौजूदा समय की जानकारी मिलती है
पैनल की स्थिति (जैसे कि वे विस्तृत हैं या छिपे हुए हैं). डिफ़ॉल्ट के लिए
नेविगेटर के scaffoldDirective
विकल्प का इस्तेमाल करें और
scaffoldValue
:
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
मुख्य पैनल और सहायक पैनल के कंपोज़ेबल में आपका कॉन्टेंट शामिल होता है. इस्तेमाल की जाने वाली चीज़ें
के दौरान डिफ़ॉल्ट पैनल ऐनिमेशन लागू करने के लिए AnimatedPane
नेविगेशन. स्कैफ़ोल्ड की वैल्यू का इस्तेमाल करके, यह पता करें कि साथ काम करने वाला पैनल सही से काम कर रहा है या नहीं
छिपाया गया हो; अगर हां, तो
navigateTo(ThreePaneScaffoldRole.Secondary)
सहायक पैनल का इस्तेमाल करें.
यहां स्कैफ़ोल्ड को पूरी तरह लागू करने की जानकारी दी गई है:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Main pane content if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) { Button( modifier = Modifier.wrapContentSize(), onClick = { navigator.navigateTo(SupportingPaneScaffoldRole.Supporting) } ) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } }, supportingPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Supporting pane content Text("Supporting pane") } }, )
पैनल कंपोज़ेबल एक्सट्रैक्ट करें
SupportingPaneScaffold
के अलग-अलग पैनल को अलग-अलग पैनल में निकालें
कंपोज़ेबल, ताकि उन्हें दोबारा इस्तेमाल किया जा सके और टेस्ट किया जा सके. इस्तेमाल की जाने वाली चीज़ें
AnimatedPane
को ऐक्सेस करने के लिए ThreePaneScaffoldScope
, अगर
आपको डिफ़ॉल्ट ऐनिमेशन चाहिए:
@Composable fun ThreePaneScaffoldScope.MainPane( shouldShowSupportingPaneButton: Boolean, onNavigateToSupportingPane: () -> Unit, modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Main pane content if (shouldShowSupportingPaneButton) { Button(onClick = onNavigateToSupportingPane) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } } @Composable fun ThreePaneScaffoldScope.SupportingPane( modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Supporting pane content Text("This is the supporting pane") } }
पैनल को कंपोज़ेबल में निकालने से,
SupportingPaneScaffold
(इन्हें लागू करने के लिए, इनकी तुलना करें
पिछले सेक्शन में मचान जोड़ रहे हैं):
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { MainPane( shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden, onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) } ) }, supportingPane = { SupportingPane() }, )