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

List-detail, ऐसा यूज़र इंटरफ़ेस (यूआई) पैटर्न है जिसमें दो पैनल वाला लेआउट होता है. इसमें एक पैनल होता है आइटम की सूची दिखाता है और दूसरा पैनल, चुने गए आइटम की जानकारी दिखाता है सूची में से चैनल हटाएं.

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

ListDetailPaneScaffold के साथ यूज़र इंटरफ़ेस (यूआई) पैटर्न लागू करें

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

सूची वाले पेज के बगल में, ज़्यादा जानकारी वाला पैनल दिखाया जाता है.
पहली इमेज. ज़रूरत के मुताबिक स्क्रीन साइज़ उपलब्ध होने पर, पैनल, सूची वाले पैनल के बगल में दिखता है.
किसी आइटम को चुनने के बाद, ज़्यादा जानकारी वाला पैनल पूरी स्क्रीन का जगह ले लेता है.
दूसरी इमेज. स्क्रीन का साइज़ सीमित होने पर, ज़्यादा जानकारी वाला पैनल (किसी आइटम के चुने जाने की वजह से) वह पूरी जगह घेर लेती हैं.

डिपेंडेंसी बताएं

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 को इस तरह लागू करें:

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

    @Parcelize
class MyItem(val id: Int) : Parcelable
    SampleListDetailPaneScaffold.kt

  2. इसकी मदद से ThreePaneScaffoldNavigator बनाएं rememberListDetailPaneScaffoldNavigator और BackHandler जोड़ें. यह नेविगेटर का इस्तेमाल सूची, जानकारी, और अतिरिक्त पैनल के बीच स्विच करने के लिए किया जाता है. इन्होंने बदलाव किया है सामान्य टाइप की घोषणा करते हुए, नेविगेटर स्कैफ़ोल्ड (जिस पर MyItem को दिखाया जा रहा है). क्योंकि इस तरह की डेटा को पार्स किया जा सकता है, इसलिए नेविगेटर की मदद से स्थिति को सेव और वापस लाया जा सकता है कॉन्फ़िगरेशन के बदलावों को अपने-आप मैनेज करता है. कॉन्टेंट बनाने BackHandler वापस जाने के लिए सिस्टम के जेस्चर का इस्तेमाल करके सहायता देता है या बटन. 'वापस जाएं' बटन के काम करने का अनुमानित व्यवहार ListDetailPaneScaffold, खिड़की के साइज़ और मौजूदा स्कैफ़ोल्ड के हिसाब से तय होता है वैल्यू. अगर ListDetailPaneScaffold, फिर canNavigateBack() true है, तो BackHandler.

    val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}
    SampleListDetailPaneScaffold.kt

  3. scaffoldState को navigator से ListDetailPaneScaffold कंपोज़ेबल.

    ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    // ...
)
    SampleListDetailPaneScaffold.kt

  4. 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)
                }
            )
        }
    },
    // ...
)
    SampleListDetailPaneScaffold.kt

  5. ListDetailPaneScaffold में, ब्यौरे वाले पैनल को लागू करने की प्रोसेस शामिल करें. नेविगेशन पूरा हो जाने पर, currentDestination में आपका पैनल होता है ऐप ने पैनल में प्रदर्शित सामग्री सहित, पर नेविगेट किया है. कॉन्टेंट बनाने content प्रॉपर्टी एक ही तरह की है, जिसकी जानकारी ओरिजनल याद कॉल में दी गई थी (इस उदाहरण में MyItem), ताकि आप किसी भी डेटा के लिए भी प्रॉपर्टी को ऐक्सेस कर सकें जिसे आपको दिखाना होगा.

    ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane =
    // ...
    detailPane = {
        AnimatedPane {
            navigator.currentDestination?.content?.let {
                MyDetails(it)
            }
        }
    },
)
    SampleListDetailPaneScaffold.kt

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

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)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt

पीछे जाएं
अडैप्टिव नेविगेशन बनाएं
आगे बढ़ें
साथ काम करने वाले पैनल का लेआउट बनाएं