साथ काम करने वाले पैनल का लेआउट बनाएं

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

सहायक पैनल को लागू करना

SupportingPaneScaffold में ज़्यादा से ज़्यादा तीन चीज़ें शामिल होती हैं पैनल: एक मुख्य पैनल, एक सहायक पैनल, और एक वैकल्पिक अतिरिक्त पैनल. स्कैफ़ोल्ड यह विंडो स्पेस को तीन पैनलों में बांटने के लिए, सभी कैलकुलेशन करता है. चालू है बड़ी स्क्रीन पर, स्कैफ़ोल्ड में मुख्य पैनल दिखता है. साथ ही, स्क्रीन के ऊपर वाला पैनल चालू होता है किनारे पर हैं. छोटी स्क्रीन पर, स्कैफ़ोल्ड में मुख्य स्क्रीन होती है फ़ुल स्क्रीन मोड में खोलें.

मुख्य कॉन्टेंट, स्क्रीन के ज़्यादातर हिस्से पर दिख रहा है. साथ ही, इसमें अन्य कॉन्टेंट भी दिख रहा है.
पहली इमेज. पैनल का लेआउट जोड़ा जा सकता है.

डिपेंडेंसी जोड़ें

SupportingPaneScaffold इसमें शामिल है: मटीरियल 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
  • अडैप्टिव लेआउट — अडैप्टिव लेआउट, जैसे कि SupportingPaneScaffold
  • अडैप्टिव नेविगेशन — अलग-अलग जगहों पर नेविगेट करने और नेविगेट करने के लिए कंपोज़ेबल पैनल के बीच

नेविगेटर और स्कैफ़ोल्ड बनाएं

छोटी विंडो में, एक बार में सिर्फ़ एक पैनल दिखता है. इसलिए, दूसरी जगह ले जाने और आने-जाने के लिए ThreePaneScaffoldNavigator पैनल. इसके साथ नेविगेटर का एक इंस्टेंस बनाएं rememberSupportingPaneScaffoldNavigator. पिछले जेस्चर इस्तेमाल करने के लिए, BackHandler का इस्तेमाल करें. canNavigateBack() और कॉल navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

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

मचान बनाने के लिए PaneScaffoldDirective की ज़रूरत होती है, जो यह कंट्रोल करता है कि स्क्रीन को कैसे बांटना है और कितना स्पेस इस्तेमाल करना है. साथ ही, ThreePaneScaffoldValue, जिससे मौजूदा समय की जानकारी मिलती है पैनल की स्थिति (जैसे कि वे विस्तृत हैं या छिपे हुए हैं). डिफ़ॉल्ट के लिए नेविगेटर के scaffoldDirective विकल्प का इस्तेमाल करें और scaffoldValue:

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

मुख्य पैनल और सहायक पैनल के कंपोज़ेबल में आपका कॉन्टेंट शामिल होता है. इस्तेमाल की जाने वाली चीज़ें के दौरान डिफ़ॉल्ट पैनल ऐनिमेशन लागू करने के लिए AnimatedPane नेविगेशन. स्कैफ़ोल्ड की वैल्यू का इस्तेमाल करके, यह पता करें कि साथ काम करने वाला पैनल सही से काम कर रहा है या नहीं छिपाया गया हो; अगर हां, तो navigateTo(ThreePaneScaffoldRole.Secondary) सहायक पैनल का इस्तेमाल करें.

यहां स्कैफ़ोल्ड को पूरी तरह लागू करने की जानकारी दी गई है:

val navigator = rememberSupportingPaneScaffoldNavigator()

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

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Main pane content
            if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier.wrapContentSize(),
                    onClick = {
                        navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Supporting pane content
            Text("Supporting pane")
        }
    },
)
SampleSupportingPaneScaffold.kt

पैनल कंपोज़ेबल एक्सट्रैक्ट करें

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

@Composable
fun ThreePaneScaffoldScope.MainPane(
    shouldShowSupportingPaneButton: Boolean,
    onNavigateToSupportingPane: () -> Unit,
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Main pane content
        if (shouldShowSupportingPaneButton) {
            Button(onClick = onNavigateToSupportingPane) {
                Text("Show supporting pane")
            }
        } else {
            Text("Supporting pane is shown")
        }
    }
}

@Composable
fun ThreePaneScaffoldScope.SupportingPane(
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Supporting pane content
        Text("This is the supporting pane")
    }
}
SampleSupportingPaneScaffold.kt

पैनल को कंपोज़ेबल में निकालने से, SupportingPaneScaffold (इन्हें लागू करने के लिए, इनकी तुलना करें पिछले सेक्शन में मचान जोड़ रहे हैं):

val navigator = rememberSupportingPaneScaffoldNavigator()

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

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt

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