একটি সমর্থনকারী ফলক লেআউট তৈরি করুন

সাপোর্টিং প্যান ক্যানোনিকাল লেআউট প্রাসঙ্গিক সাপোর্টিং কন্টেন্ট প্রদর্শন করার সময় আপনার অ্যাপের প্রধান বিষয়বস্তুর উপর ব্যবহারকারীর মনোযোগ কেন্দ্রীভূত করে। উদাহরণস্বরূপ, প্রধান বিষয়বস্তু ফলক একটি সাম্প্রতিক চলচ্চিত্র সম্পর্কে তথ্য প্রদর্শন করতে পারে যখন সমর্থনকারী ফলকটি একই থিম বা একই পরিচালক বা অভিনীত অভিনেতাদের অন্যান্য চলচ্চিত্রের একটি তালিকা প্রদর্শন করে। সমর্থনকারী প্যান ক্যানোনিকাল লেআউট সম্পর্কে আরও তথ্যের জন্য, উপাদান 3 সমর্থনকারী ফলক নির্দেশিকা দেখুন।

একটি সমর্থনকারী ফলক প্রয়োগ করুন

SupportingPaneScaffold তিনটি পর্যন্ত প্যান নিয়ে গঠিত: একটি প্রধান ফলক, একটি সমর্থনকারী ফলক এবং একটি ঐচ্ছিক অতিরিক্ত ফলক। স্ক্যাফোল্ড তিনটি প্যানে জানালার স্থান বরাদ্দ করার জন্য সমস্ত গণনা পরিচালনা করে। বড় স্ক্রিনে, স্ক্যাফোল্ডটি পাশের সাপোর্টিং প্যান সহ মূল ফলকটি প্রদর্শন করে। ছোট পর্দায়, ভারা প্রধান বা সমর্থনকারী ফলক পূর্ণ পর্দা প্রদর্শন করে।

চিত্র 1. সাপোর্টিং প্যান লেআউট।

নির্ভরতা যোগ করুন

SupportingPaneScaffold হল Material 3 অ্যাডাপটিভ লেআউট লাইব্রেরির অংশ।

আপনার অ্যাপ বা মডিউলের build.gradle ফাইলে নিম্নলিখিত তিনটি, সম্পর্কিত নির্ভরতা যোগ করুন:

কোটলিন

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

প্যান composables নিষ্কাশন

একটি 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