তালিকা-বিশদ হল একটি UI প্যাটার্ন যা একটি ডুয়াল-প্যান লেআউট নিয়ে গঠিত যেখানে একটি ফলক আইটেমগুলির একটি তালিকা উপস্থাপন করে এবং অন্য একটি ফলক তালিকা থেকে নির্বাচিত আইটেমগুলির বিবরণ প্রদর্শন করে।
প্যাটার্নটি বিশেষ করে এমন অ্যাপ্লিকেশনগুলির জন্য উপযোগী যেগুলি বড় সংগ্রহের উপাদানগুলির সম্পর্কে গভীর তথ্য প্রদান করে, উদাহরণস্বরূপ, একটি ইমেল ক্লায়েন্ট যার ইমেলের তালিকা এবং প্রতিটি ইমেল বার্তার বিস্তারিত বিষয়বস্তু রয়েছে৷ তালিকা-বিশদ বিবরণ ফলকে প্রতিটি বিভাগের জন্য পছন্দগুলির সাথে বিভাগগুলির একটি তালিকায় অ্যাপ পছন্দগুলিকে ভাগ করার মতো কম জটিল পথের জন্যও ব্যবহার করা যেতে পারে।
ListDetailPaneScaffold
এর সাথে UI প্যাটার্ন প্রয়োগ করুন
ListDetailPaneScaffold
হল একটি কম্পোজযোগ্য যা আপনার অ্যাপে তালিকা-বিশদ প্যাটার্ন বাস্তবায়নকে সহজ করে। একটি তালিকা-বিশদ স্ক্যাফোল্ড তিনটি পর্যন্ত প্যানে থাকতে পারে: একটি তালিকা ফলক, একটি বিস্তারিত ফলক এবং একটি ঐচ্ছিক অতিরিক্ত ফলক। ভারা পর্দা স্থান গণনা পরিচালনা করে. যখন পর্যাপ্ত স্ক্রীন মাপ পাওয়া যায়, বিস্তারিত ফলক তালিকা ফলকের পাশাপাশি প্রদর্শিত হয়। ছোট পর্দার আকারে, স্ক্যাফোল্ডটি স্বয়ংক্রিয়ভাবে তালিকা বা বিস্তারিত ফলক পূর্ণ স্ক্রীন প্রদর্শন করতে স্যুইচ করে।
![তালিকা পৃষ্ঠার পাশে একটি বিস্তারিত ফলক দেখানো হয়েছে।](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/list-detail-2.png?authuser=1&hl=bn)
![একটি আইটেম নির্বাচন করার পরে, বিস্তারিত ফলকটি পুরো স্ক্রীনটি দখল করে।](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/list-detail-1.png?authuser=1&hl=bn)
নির্ভরতা ঘোষণা করুন
ListDetailPaneScaffold
হল উপাদান 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
- অভিযোজিত-লেআউট — অভিযোজিত বিন্যাস যেমন
ListDetailPaneScaffold
এবংSupportingPaneScaffold
- অভিযোজিত-নেভিগেশন — প্যানের মধ্যে এবং এর মধ্যে নেভিগেট করার জন্য কম্পোজেবল
মৌলিক ব্যবহার
নিম্নরূপ ListDetailPaneScaffold
প্রয়োগ করুন:
নির্বাচন করা বিষয়বস্তু প্রতিনিধিত্ব করে এমন একটি শ্রেণী ব্যবহার করুন। নির্বাচিত তালিকা আইটেম সংরক্ষণ এবং পুনরুদ্ধার সমর্থন করার জন্য এই ক্লাসটি
Parcelable
হওয়া উচিত। আপনার জন্য কোড তৈরি করতে kotlin-parcelize প্লাগইন ব্যবহার করুন।@Parcelize class MyItem(val id: Int) : Parcelable
rememberListDetailPaneScaffoldNavigator
দিয়ে একটিThreePaneScaffoldNavigator
তৈরি করুন এবং একটিBackHandler
যোগ করুন। এই ন্যাভিগেটরটি তালিকা, বিস্তারিত এবং অতিরিক্ত প্যানের মধ্যে স্থানান্তর করতে ব্যবহৃত হয়। একটি জেনেরিক টাইপ ঘোষণা করে, নেভিগেটর স্ক্যাফোল্ডের অবস্থাও ট্র্যাক করে (অর্থাৎ, যাMyItem
প্রদর্শিত হচ্ছে)। যেহেতু এই প্রকারটি পার্সেলযোগ্য, তাই স্বয়ংক্রিয়ভাবে কনফিগারেশন পরিবর্তনগুলি পরিচালনা করতে নেভিগেটর দ্বারা স্টেটটি সংরক্ষণ এবং পুনরুদ্ধার করা যেতে পারে।BackHandler
সিস্টেম ব্যাক জেসচার বা বোতাম ব্যবহার করে ব্যাক নেভিগেট করার জন্য সমর্থন প্রদান করে। একটিListDetailPaneScaffold
এর জন্য পিছনের বোতামের প্রত্যাশিত আচরণ উইন্ডোর আকার এবং বর্তমান স্ক্যাফোল্ড মানের উপর নির্ভর করে। যদিListDetailPaneScaffold
বর্তমান অবস্থার সাথে ফিরে যেতে সমর্থন করতে পারে, তাহলেcanNavigateBack()
true
,BackHandler
সক্রিয় করে।val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
navigator
থেকেListDetailPaneScaffold
কম্পোজেবলেscaffoldState
পাস করুন।ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
ListDetailPaneScaffold
এ আপনার তালিকা ফলক বাস্তবায়ন সরবরাহ করুন। নেভিগেশনের সময় ডিফল্ট প্যান অ্যানিমেশন প্রয়োগ করতেAnimatedPane
ব্যবহার করুন। তারপর বিস্তারিত ফলক,ListDetailPaneScaffoldRole.Detail
এ নেভিগেট করতেThreePaneScaffoldNavigator
ব্যবহার করুন এবং পাস করা আইটেমটি প্রদর্শন করুন।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) } ) } }, // ... )
ListDetailPaneScaffold
এ আপনার বিস্তারিত ফলক বাস্তবায়ন অন্তর্ভুক্ত করুন। যখন নেভিগেশন সম্পন্ন হয়,currentDestination
প্যানে প্রদর্শিত বিষয়বস্তু সহ আপনার অ্যাপটি নেভিগেট করেছে এমন প্যানে থাকে।content
প্রপার্টি একই ধরনের মূল রিমেন্ড কলে উল্লেখ করা হয়েছে ( এই উদাহরণেMyItem
), তাই আপনি যে কোনো ডেটার জন্য প্রপার্টি অ্যাক্সেস করতে পারেন যা আপনাকে প্রদর্শন করতে হবে।ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
আপনি উপরের পদক্ষেপগুলি বাস্তবায়ন করার পরে, আপনার কোডটি এর মতো দেখতে হবে:
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) } } }, )