একটি তালিকা-বিশদ বিন্যাস তৈরি করুন

তালিকা-বিশদ হল একটি UI প্যাটার্ন যা একটি ডুয়াল-প্যান লেআউট নিয়ে গঠিত যেখানে একটি ফলক আইটেমগুলির একটি তালিকা উপস্থাপন করে এবং অন্য একটি ফলক তালিকা থেকে নির্বাচিত আইটেমগুলির বিবরণ প্রদর্শন করে।

প্যাটার্নটি বিশেষ করে এমন অ্যাপ্লিকেশনগুলির জন্য উপযোগী যেগুলি বড় সংগ্রহের উপাদানগুলির সম্পর্কে গভীর তথ্য প্রদান করে, উদাহরণস্বরূপ, একটি ইমেল ক্লায়েন্ট যার ইমেলের তালিকা এবং প্রতিটি ইমেল বার্তার বিস্তারিত বিষয়বস্তু রয়েছে৷ তালিকা-বিশদ বিবরণ ফলকে প্রতিটি বিভাগের জন্য পছন্দগুলির সাথে বিভাগগুলির একটি তালিকায় অ্যাপ পছন্দগুলিকে ভাগ করার মতো কম জটিল পথের জন্যও ব্যবহার করা যেতে পারে।

ListDetailPaneScaffold এর সাথে UI প্যাটার্ন প্রয়োগ করুন

ListDetailPaneScaffold হল একটি কম্পোজযোগ্য যা আপনার অ্যাপে তালিকা-বিশদ প্যাটার্ন বাস্তবায়নকে সহজ করে। একটি তালিকা-বিশদ স্ক্যাফোল্ড তিনটি পর্যন্ত প্যানে থাকতে পারে: একটি তালিকা ফলক, একটি বিস্তারিত ফলক এবং একটি ঐচ্ছিক অতিরিক্ত ফলক। ভারা পর্দা স্থান গণনা পরিচালনা করে. যখন পর্যাপ্ত স্ক্রীন মাপ পাওয়া যায়, বিস্তারিত ফলক তালিকা ফলকের পাশাপাশি প্রদর্শিত হয়। ছোট পর্দার আকারে, স্ক্যাফোল্ডটি স্বয়ংক্রিয়ভাবে তালিকা বা বিস্তারিত ফলক পূর্ণ স্ক্রীন প্রদর্শন করতে স্যুইচ করে।

তালিকা পৃষ্ঠার পাশে একটি বিস্তারিত ফলক দেখানো হয়েছে।
চিত্র 1. যখন পর্যাপ্ত স্ক্রীন আকার উপলব্ধ থাকে, তখন বিস্তারিত ফলক তালিকা ফলকের পাশাপাশি দেখানো হয়।
একটি আইটেম নির্বাচন করার পরে, বিস্তারিত ফলকটি পুরো স্ক্রীনটি দখল করে।
চিত্র 2. যখন পর্দার আকার সীমিত হয়, তখন বিস্তারিত ফলক (যেহেতু একটি আইটেম নির্বাচন করা হয়েছে) পুরো স্থান দখল করে।

নির্ভরতা ঘোষণা করুন

ListDetailPaneScaffold হল উপাদান 3 অভিযোজিত বিন্যাস লাইব্রেরির অংশ।

আপনার অ্যাপে অবশ্যই তিনটি সম্পর্কিত উপাদান 3 লাইব্রেরির জন্য নির্ভরতা অন্তর্ভুক্ত করতে হবে:

  • অভিযোজিত — নিম্ন-স্তরের বিল্ডিং ব্লক যেমন HingeInfo এবং Posture
  • অভিযোজিত-লেআউট — অভিযোজিত বিন্যাস যেমন ListDetailPaneScaffold এবং SupportingPaneScaffold
    • অভিযোজিত-নেভিগেশন — প্যানের মধ্যে এবং এর মধ্যে নেভিগেট করার জন্য কম্পোজেবল

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

কোটলিন


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

গ্রোভি


implementation 'androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12'

মৌলিক ব্যবহার

নিম্নরূপ ListDetailPaneScaffold প্রয়োগ করুন:

  1. নির্বাচন করা বিষয়বস্তু প্রতিনিধিত্ব করে এমন একটি শ্রেণী ব্যবহার করুন। নির্বাচিত তালিকা আইটেম সংরক্ষণ এবং পুনরুদ্ধার সমর্থন করার জন্য এই ক্লাসটি Parcelable হওয়া উচিত। আপনার জন্য কোড তৈরি করতে kotlin-parcelize প্লাগইন ব্যবহার করুন।

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

  2. rememberListDetailPaneScaffoldNavigator দিয়ে একটি ThreePaneScaffoldNavigator তৈরি করুন এবং একটি BackHandler যোগ করুন। এই ন্যাভিগেটরটি তালিকা, বিস্তারিত এবং অতিরিক্ত প্যানের মধ্যে স্থানান্তর করতে ব্যবহৃত হয়। একটি জেনেরিক টাইপ ঘোষণা করে, নেভিগেটর স্ক্যাফোল্ডের অবস্থাও ট্র্যাক করে (অর্থাৎ, যা MyItem প্রদর্শিত হচ্ছে)। যেহেতু এই প্রকারটি পার্সেলযোগ্য, তাই স্বয়ংক্রিয়ভাবে কনফিগারেশন পরিবর্তনগুলি পরিচালনা করতে নেভিগেটর দ্বারা স্টেটটি সংরক্ষণ এবং পুনরুদ্ধার করা যেতে পারে। BackHandler সিস্টেম ব্যাক জেসচার বা বোতাম ব্যবহার করে ব্যাক নেভিগেট করার জন্য সমর্থন প্রদান করে। একটি ListDetailPaneScaffold এর জন্য পিছনের বোতামের প্রত্যাশিত আচরণ উইন্ডোর আকার এবং বর্তমান স্ক্যাফোল্ড মানের উপর নির্ভর করে। যদি 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 ব্যবহার করুন। তারপর বিস্তারিত ফলক, 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)
                }
            )
        }
    },
    // ...
)
    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

পূর্ববর্তী
অভিযোজিত নেভিগেশন তৈরি করুন
পরবর্তী
একটি সমর্থনকারী ফলক লেআউট তৈরি করুন