সাপোর্টিং প্যান ক্যানোনিকাল লেআউট প্রাসঙ্গিক সাপোর্টিং কন্টেন্ট প্রদর্শন করার সময় আপনার অ্যাপের প্রধান বিষয়বস্তুর উপর ব্যবহারকারীর মনোযোগ কেন্দ্রীভূত করে। উদাহরণস্বরূপ, প্রধান বিষয়বস্তু ফলক একটি সাম্প্রতিক চলচ্চিত্র সম্পর্কে তথ্য প্রদর্শন করতে পারে যখন সমর্থনকারী ফলকটি একই থিম বা একই পরিচালক বা অভিনীত অভিনেতাদের অন্যান্য চলচ্চিত্রের একটি তালিকা প্রদর্শন করে। সমর্থনকারী প্যান ক্যানোনিকাল লেআউট সম্পর্কে আরও তথ্যের জন্য, উপাদান 3 সমর্থনকারী ফলক নির্দেশিকা দেখুন।
একটি সমর্থনকারী ফলক প্রয়োগ করুন
SupportingPaneScaffold
তিনটি পর্যন্ত প্যান নিয়ে গঠিত: একটি প্রধান ফলক, একটি সমর্থনকারী ফলক এবং একটি ঐচ্ছিক অতিরিক্ত ফলক। স্ক্যাফোল্ড তিনটি প্যানে জানালার স্থান বরাদ্দ করার জন্য সমস্ত গণনা পরিচালনা করে। বড় স্ক্রিনে, স্ক্যাফোল্ডটি পাশের সাপোর্টিং প্যান সহ মূল ফলকটি প্রদর্শন করে। ছোট পর্দায়, ভারা প্রধান বা সমর্থনকারী ফলক পূর্ণ পর্দা প্রদর্শন করে।
![মুখ্য বিষয়বস্তু প্রদর্শনের বেশিরভাগ অংশ দখল করে থাকে এবং পাশাপাশি সাপোর্টিং কন্টেন্ট।](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=1&hl=bn)
নির্ভরতা যোগ করুন
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() }
স্ক্যাফোল্ডের জন্য একটি PaneScaffoldDirective
প্রয়োজন, যা নিয়ন্ত্রণ করে কিভাবে স্ক্রীনকে বিভক্ত করা যায় এবং কতটা ব্যবধান ব্যবহার করতে হয় এবং একটি ThreePaneScaffoldValue
, যা প্যানের বর্তমান অবস্থা প্রদান করে (যেমন সেগুলি প্রসারিত বা লুকানো কিনা)। ডিফল্ট আচরণের জন্য, যথাক্রমে ন্যাভিগেটরের scaffoldDirective
এবং scaffoldValue
ব্যবহার করুন:
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
প্রধান ফলক এবং সমর্থনকারী ফলক হল আপনার বিষয়বস্তু ধারণকারী কম্পোজেবল। নেভিগেশনের সময় ডিফল্ট প্যান অ্যানিমেশন প্রয়োগ করতে 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") } }, )
প্যান 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") } }
কম্পোজেবলগুলিতে প্যানগুলি নিষ্কাশন করা 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() }, )