List-detail, ऐसा यूज़र इंटरफ़ेस (यूआई) पैटर्न है जिसमें दो पैनल वाला लेआउट होता है. इसमें एक पैनल होता है आइटम की सूची दिखाता है और दूसरा पैनल, चुने गए आइटम की जानकारी दिखाता है सूची में से चैनल हटाएं.
यह पैटर्न खास तौर पर उन ऐप्लिकेशन के लिए मददगार है जो ज़्यादा जानकारी वाले ऐप्लिकेशन बनाते हैं बड़े कलेक्शन के एलिमेंट के बारे में जानकारी, जैसे कि ईमेल क्लाइंट जिसमें ईमेल की सूची और हर ईमेल मैसेज की पूरी जानकारी शामिल होती है. सूची की जानकारी का इस्तेमाल कम ज़रूरी पाथ के लिए भी किया जा सकता है. जैसे, ऐप्लिकेशन को अलग-अलग हिस्सों में बांटना इस कैटगरी में, कैटगरी की सूची में प्राथमिकताएं और हर कैटगरी के लिए प्राथमिकताएं चुनी गई हैं विवरण पैनल.
ListDetailPaneScaffold
के साथ यूज़र इंटरफ़ेस (यूआई) पैटर्न लागू करें
ListDetailPaneScaffold
एक कंपोज़ेबल है, जो
आपके ऐप्लिकेशन में सूची-विवरण पैटर्न. सूची की जानकारी वाले मचान में ज़्यादा से ज़्यादा इतनी प्रॉपर्टी हो सकती हैं
तीन पैनल: एक सूची पैनल, एक जानकारी वाला पैनल, और एक वैकल्पिक अतिरिक्त पैनल. कॉन्टेंट बनाने
स्कैफ़ोल्ड से स्क्रीन स्पेस का हिसाब लगाया जा सकता है. जब स्क्रीन का काफ़ी साइज़ हो
उपलब्ध होने पर, जानकारी वाला पैनल सूची पैनल के साथ दिखाया जाता है. छोटी स्क्रीन पर
स्कैफ़ोल्ड में स्लाइड की सूची या साइज़,
ब्यौरे वाले पैनल को फ़ुल स्क्रीन मोड में देखें.
![सूची वाले पेज के बगल में, ज़्यादा जानकारी वाला पैनल दिखाया जाता है.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/list-detail-2.png?authuser=19&hl=hi)
![किसी आइटम को चुनने के बाद, ज़्यादा जानकारी वाला पैनल पूरी स्क्रीन का जगह ले लेता है.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/list-detail-1.png?authuser=19&hl=hi)
डिपेंडेंसी बताएं
ListDetailPaneScaffold
, मटीरियल 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
- अडैप्टिव लेआउट — अडैप्टिव लेआउट, जैसे कि
ListDetailPaneScaffold
औरSupportingPaneScaffold
- अडैप्टिव नेविगेशन — अलग-अलग जगहों पर नेविगेट करने और नेविगेट करने के लिए कंपोज़ेबल पैनल के बीच
बुनियादी इस्तेमाल
ListDetailPaneScaffold
को इस तरह लागू करें:
ऐसी क्लास का इस्तेमाल करें जो चुने जाने वाले कॉन्टेंट के बारे में बताती हो. यह क्लास सेव करने के लिए
Parcelable
होना चाहिए और चुने गए सूची आइटम को वापस लाएं. kotlin-parcelize का इस्तेमाल करें प्लग इन का इस्तेमाल करें.@Parcelize class MyItem(val id: Int) : Parcelable
इसकी मदद से
ThreePaneScaffoldNavigator
बनाएंrememberListDetailPaneScaffoldNavigator
औरBackHandler
जोड़ें. यह नेविगेटर का इस्तेमाल सूची, जानकारी, और अतिरिक्त पैनल के बीच स्विच करने के लिए किया जाता है. इन्होंने बदलाव किया है सामान्य टाइप की घोषणा करते हुए, नेविगेटर स्कैफ़ोल्ड (जिस परMyItem
को दिखाया जा रहा है). क्योंकि इस तरह की डेटा को पार्स किया जा सकता है, इसलिए नेविगेटर की मदद से स्थिति को सेव और वापस लाया जा सकता है कॉन्फ़िगरेशन के बदलावों को अपने-आप मैनेज करता है. कॉन्टेंट बनानेBackHandler
वापस जाने के लिए सिस्टम के जेस्चर का इस्तेमाल करके सहायता देता है या बटन. 'वापस जाएं' बटन के काम करने का अनुमानित व्यवहारListDetailPaneScaffold
, खिड़की के साइज़ और मौजूदा स्कैफ़ोल्ड के हिसाब से तय होता है वैल्यू. अगरListDetailPaneScaffold
, फिरcanNavigateBack()
true
है, तोBackHandler
.val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
scaffoldState
कोnavigator
सेListDetailPaneScaffold
कंपोज़ेबल.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
ListDetailPaneScaffold
में अपने सूची पैनल के लागू होने की जानकारी दें. इस्तेमाल की जाने वाली चीज़ेंAnimatedPane
का इस्तेमाल करें. इसके बाद, इसका इस्तेमाल करें ज़्यादा जानकारी वाले पैनल पर जाने के लिएThreePaneScaffoldNavigator
,ListDetailPaneScaffoldRole.Detail
और पास किया गया आइटम दिखाएं.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) } ) } }, // ... )
ListDetailPaneScaffold
में, ब्यौरे वाले पैनल को लागू करने की प्रोसेस शामिल करें. नेविगेशन पूरा हो जाने पर,currentDestination
में आपका पैनल होता है ऐप ने पैनल में प्रदर्शित सामग्री सहित, पर नेविगेट किया है. कॉन्टेंट बनानेcontent
प्रॉपर्टी एक ही तरह की है, जिसकी जानकारी ओरिजनल याद कॉल में दी गई थी (इस उदाहरण मेंMyItem
), ताकि आप किसी भी डेटा के लिए भी प्रॉपर्टी को ऐक्सेस कर सकें जिसे आपको दिखाना होगा.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
ऊपर दिए गए चरण लागू करने के बाद, आपका कोड ऐसा दिखना चाहिए:
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }, ) } }, detailPane = { AnimatedPane { // Show the detail pane content if selected item is available navigator.currentDestination?.content?.let { MyDetails(it) } } }, )