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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

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

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

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

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

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

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

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

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

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

3. NavigableListDetailPaneScaffold में, ज़्यादा जानकारी वाले पैनल को लागू करने का तरीका शामिल करें.

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

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

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

BackNavigationBehavior विकल्प

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

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

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

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

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

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

PopUntilContentChange

इस व्यवहार से, दिखाए जाने वाले कॉन्टेंट को प्राथमिकता मिलती है. अगर आइटम 1 के बाद आइटम 2 देखा जाता है, तो 'वापस जाएं' बटन दबाने पर, आइटम 1 पर वापस पहुंचा जा सकता है. भले ही, लेआउट कुछ भी हो.

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

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

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

PopUntilCurrentDestinationChange

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

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

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

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

PopLatest

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

यह तरीका अपनाने के बाद, आपका कोड कुछ ऐसा दिखेगा:

val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
val scope = rememberCoroutineScope()

NavigableListDetailPaneScaffold(
    navigator = scaffoldNavigator,
    listPane = {
        AnimatedPane {
            MyList(
                onItemClick = { item ->
                    // Navigate to the detail pane with the passed item
                    scope.launch {
                        scaffoldNavigator.navigateTo(
                            ListDetailPaneScaffoldRole.Detail,
                            item
                        )
                    }
                },
            )
        }
    },
    detailPane = {
        AnimatedPane {
            // Show the detail pane content if selected item is available
            scaffoldNavigator.currentDestination?.contentKey?.let {
                MyDetails(it)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt