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

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

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

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

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

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

डिपेंडेंसी का एलान करना

ListDetailPaneScaffold, Material 3 के अडैप्टिव लेआउट की लाइब्रेरी का हिस्सा है.

अपने ऐप्लिकेशन या मॉड्यूल की build.gradle फ़ाइल में, इन तीन मिलती-जुलती डिपेंडेंसी जोड़ें:

Kotlin

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

Groovy

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 — पैनल में और एक से दूसरे पैनल पर नेविगेट करने के लिए, कॉम्पोज़ेबल

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

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

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

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

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

    val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

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

  3. navigator से ListDetailPaneScaffold कॉम्पोज़ेबल में scaffoldState पास करें.

    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

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