लिस्ट की जानकारी वाला लेआउट बनाना

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
• अडैप्टिव-लेआउट: अडैप्टिव लेआउट, जैसे कि ListDetailPaneScaffold और SupportingPaneScaffold
• adaptive-navigation: यह लाइब्रेरी, अलग-अलग पैनल के बीच और उनके अंदर नेविगेट करने के लिए कंपोज़ेबल उपलब्ध कराती है. साथ ही, यह अडैप्टिव लेआउट उपलब्ध कराती है, जो डिफ़ॉल्ट रूप से नेविगेशन की सुविधा देते हैं. जैसे, NavigableListDetailPaneScaffold और NavigableSupportingPaneScaffold

पक्का करें कि आपके प्रोजेक्ट में compose-material3-adaptive का वर्शन 1.1.0-beta1 या इसके बाद का वर्शन शामिल हो.

पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर के लिए ऑप्ट-इन करना

Android 15 या इससे पहले के वर्शन में, पीछे जाने पर झलक दिखाने वाले ऐनिमेशन की सुविधा चालू करने के लिए, आपको पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर की सुविधा के लिए ऑप्ट-इन करना होगा. शामिल होने के लिए, android:enableOnBackInvokedCallback="true" को <application> टैग या अपनी AndroidManifest.xml फ़ाइल में मौजूद अलग-अलग <activity> टैग में जोड़ें. ज़्यादा जानकारी के लिए, पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर की सुविधा के लिए ऑप्ट-इन करना लेख पढ़ें.

जब आपका ऐप्लिकेशन Android 16 (एपीआई लेवल 36) या इसके बाद के वर्शन को टारगेट करता है, तो पीछे जाने पर झलक दिखाने वाला हाथ का जेस्चर डिफ़ॉल्ट रूप से चालू हो जाता है.

बुनियादी इस्तेमाल

NavigableListDetailPaneScaffold को इस तरह लागू करें:

1. ऐसी क्लास का इस्तेमाल करें जो चुने गए कॉन्टेंट को दिखाती हो. चुने गए सूची आइटम को सेव करने और वापस लाने के लिए, Parcelable क्लास का इस्तेमाल करें. कोड जनरेट करने के लिए, kotlin-parcelize प्लग इन का इस्तेमाल करें.
2. rememberListDetailPaneScaffoldNavigator की मदद से ThreePaneScaffoldNavigator बनाएं.

इस नेविगेटर का इस्तेमाल, सूची, जानकारी, और अतिरिक्त पैनल के बीच स्विच करने के लिए किया जाता है. जेनेरिक टाइप का एलान करके, नेविगेटर स्कैफ़ोल्ड की स्थिति को भी ट्रैक करता है. इसका मतलब है कि कौनसा MyItem दिखाया जा रहा है. यह टाइप पार्सल किया जा सकता है. इसलिए, कॉन्फ़िगरेशन में होने वाले बदलावों को अपने-आप मैनेज करने के लिए, नेविगेटर इसकी स्थिति को सेव और वापस ला सकता है.

1. नेविगेटर को NavigableListDetailPaneScaffold कंपोज़ेबल में पास करें.

2. NavigableListDetailPaneScaffold को सूची वाले पैनल का लागू किया गया वर्शन दें. नेविगेशन के दौरान डिफ़ॉल्ट पैनल ऐनिमेशन लागू करने के लिए, AnimatedPane का इस्तेमाल करें. इसके बाद, ब्यौरे वाले पैनल ListDetailPaneScaffoldRole.Detail पर जाने के लिए, ThreePaneScaffoldNavigator का इस्तेमाल करें और पास किए गए आइटम को दिखाएं.

3. NavigableListDetailPaneScaffold में ब्यौरे वाले पैनल को लागू करें.

नेविगेशन पूरा होने पर, currentDestination में वह पैनल होता है जिस पर आपका ऐप्लिकेशन नेविगेट करता है. इसमें पैनल में दिखाया गया कॉन्टेंट भी शामिल होता है. contentKey प्रॉपर्टी उसी टाइप की होती है जो ओरिजनल कॉल में बताई गई है. इससे आपको वह डेटा ऐक्सेस करने में मदद मिलती है जो आपको दिखाना है.

1. इसके अलावा, NavigableListDetailPaneScaffold में defaultBackBehavior को बदला जा सकता है. डिफ़ॉल्ट रूप से, NavigableListDetailPaneScaffold defaultBackBehavior के लिए PopUntilScaffoldValueChange का इस्तेमाल करता है.

अगर आपके ऐप्लिकेशन को पीछे जाने की प्रोसेस के लिए किसी अलग पैटर्न की ज़रूरत है, तो कोई दूसरा BackNavigationBehavior विकल्प चुनकर, इस व्यवहार को बदला जा सकता है.

BackNavigationBehavior विकल्प

यहां दिए गए सेक्शन में, ईमेल ऐप्लिकेशन का उदाहरण दिया गया है. इसमें एक पैनल में ईमेल की सूची और दूसरे पैनल में पूरी जानकारी दिखती है.

PopUntilScaffoldValueChange (ज़्यादातर मामलों में डिफ़ॉल्ट और सुझाया गया)

यह व्यवहार, लेआउट के पूरे स्ट्रक्चर में होने वाले बदलावों पर फ़ोकस करता है. मल्टी-पैन सेटअप में, ब्यौरे वाले पैनल में ईमेल के कॉन्टेंट में बदलाव करने से, लेआउट के बुनियादी स्ट्रक्चर में कोई बदलाव नहीं होता. इसलिए, 'वापस जाएं' बटन दबाने पर, ऐप्लिकेशन या मौजूदा नेविगेशन ग्राफ़ बंद हो सकता है. ऐसा इसलिए होता है, क्योंकि मौजूदा कॉन्टेक्स्ट में, लेआउट में किए गए बदलावों को पहले जैसा करने का कोई विकल्प नहीं होता. सिंगल-पेन लेआउट में, बैक बटन दबाने पर, ज़्यादा जानकारी वाले व्यू में कॉन्टेंट में किए गए बदलावों को स्किप कर दिया जाएगा और सूची वाले व्यू पर वापस आ जाएगा. ऐसा इसलिए होता है, क्योंकि यह लेआउट में साफ़ तौर पर बदलाव दिखाता है.

नीचे दिए गए उदाहरण देखें:

• मल्टी-पैन: ब्यौरे वाले पैनल में कोई ईमेल (आइटम 1) देखा जा रहा है. किसी दूसरे ईमेल (आइटम 2) पर क्लिक करने से, ब्यौरे वाला पैनल अपडेट हो जाता है. हालांकि, सूची और ब्यौरे वाले पैनल दिखते रहते हैं. 'वापस जाएं' बटन दबाने पर, ऐप्लिकेशन या मौजूदा नेविगेशन फ़्लो से बाहर निकला जा सकता है.
• सिंगल-पेन: इसमें आपको पहले आइटम 1 और फिर आइटम 2 दिखता है. 'वापस जाएं' बटन दबाने पर, आपको सीधे ईमेल की सूची वाले पैनल पर ले जाया जाएगा.

इसका इस्तेमाल तब करें, जब आपको उपयोगकर्ताओं को हर बार बैक ऐक्शन के साथ अलग-अलग लेआउट ट्रांज़िशन दिखाना हो.

PopUntilContentChange

इस तरीके से, दिखाए जाने वाले कॉन्टेंट को प्राथमिकता दी जाती है. अगर आपने आइटम 1 और फिर आइटम 2 देखा है, तो वापस जाने पर आपको आइटम 1 दिखेगा. इससे कोई फ़र्क़ नहीं पड़ता कि लेआउट कैसा है.

नीचे दिए गए उदाहरण देखें:

• मल्टी-पैन: आपने ब्यौरे वाले पैनल में आइटम 1 देखा. इसके बाद, सूची में मौजूद आइटम 2 पर क्लिक किया. ब्यौरे वाला पैनल अपडेट हो जाता है. 'वापस जाएं' बटन दबाने पर, ब्यौरे वाला पैनल आइटम 1 पर वापस आ जाएगा.
• सिंगल-पेन: कॉन्टेंट को पहले जैसा करने की सुविधा मिलती है.

इसका इस्तेमाल तब करें, जब उपयोगकर्ता को बैक ऐक्शन की मदद से, पहले देखे गए कॉन्टेंट पर वापस जाना हो.

PopUntilCurrentDestinationChange

इस व्यवहार से, पिछली गतिविधियां तब तक पॉप होती हैं, जब तक मौजूदा नेविगेशन डेस्टिनेशन नहीं बदल जाता. यह सिंगल और मल्टी-पैन लेआउट, दोनों पर लागू होता है.

नीचे दिए गए उदाहरण देखें:

चाहे आप सिंगल या मल्टी-पैन लेआउट में हों, बैक बटन दबाने से फ़ोकस हमेशा हाइलाइट किए गए नेविगेशन एलिमेंट से पिछली डेस्टिनेशन पर चला जाएगा. हमारे ईमेल ऐप्लिकेशन में, इसका मतलब है कि चुने गए पैनल का विज़ुअल इंडिकेशन शिफ़्ट हो जाएगा.

इसका इस्तेमाल तब करें, जब उपयोगकर्ता अनुभव के लिए, मौजूदा नेविगेशन का साफ़ तौर पर विज़ुअल इंडिकेशन बनाए रखना ज़रूरी हो.

PopLatest

इस विकल्प से, बैकस्टैक से सिर्फ़ सबसे हाल ही का डेस्टिनेशन हटता है. इस विकल्प का इस्तेमाल करके, बीच के चरणों को छोड़े बिना पीछे जाने की प्रोसेस पूरी करें.

इन चरणों को लागू करने के बाद, आपका कोड कुछ ऐसा दिखना चाहिए:

NavigableListDetailPaneScaffold(
    navigator = navigator,
    listPane = {
        AnimatedPane {
            ListContent(
                words = sampleWords,
                selectionState = navigator.currentDestination?.contentKey?.let {
                    SelectionVisibilityState.ShowSelection(it)
                } ?: SelectionVisibilityState.NoSelection,
                onWordClick = { word ->
                    scope.launch {
                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, word)
                    }
                },
                animatedVisibilityScope = this@AnimatedPane,
                sharedTransitionScope = this@SharedTransitionLayout
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailContent(
                definedWord = navigator.currentDestination?.contentKey,
                animatedVisibilityScope = this@AnimatedPane,
                sharedTransitionScope = this@SharedTransitionLayout,
                onClosePane = {
                    scope.launch {
                        navigator.navigateBack(
                            backNavigationBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
                        )

                    }
                }
            )
        }
    }
ListDetailSample.kt