ট্যাব

ট্যাবগুলি আপনাকে সম্পর্কিত সামগ্রীর গোষ্ঠীগুলি সংগঠিত করতে দেয়। দুই ধরণের ট্যাব রয়েছে:

• প্রাথমিক ট্যাব : কন্টেন্ট প্যানের উপরে একটি শীর্ষ অ্যাপ বারের নিচে স্থাপন করা হয়। এগুলি মূল কন্টেন্ট গন্তব্যস্থল প্রদর্শন করে এবং যখন কেবল এক সেট ট্যাবের প্রয়োজন হয় তখন ব্যবহার করা উচিত।
• সেকেন্ডারি ট্যাব : একটি কন্টেন্ট এরিয়ার মধ্যে সম্পর্কিত কন্টেন্টকে আরও আলাদা করতে এবং শ্রেণিবিন্যাস স্থাপন করতে ব্যবহৃত হয়। যখন একটি স্ক্রিনে একাধিক স্তরের ট্যাবের প্রয়োজন হয় তখন এগুলি প্রয়োজনীয়।

এই পৃষ্ঠাটি দেখায় কিভাবে আপনার অ্যাপে প্রাথমিক ট্যাবগুলি সম্পর্কিত স্ক্রিন এবং মৌলিক নেভিগেশন সহ প্রদর্শন করবেন।

এপিআই সারফেস

ট্যাবগুলি বাস্তবায়নের জন্য Tab , PrimaryTabRow , এবং SecondaryTabRow কম্পোজেবল ব্যবহার করুন। Tab কম্পোজেবল সারির মধ্যে একটি পৃথক ট্যাব উপস্থাপন করে এবং সাধারণত PrimaryTabRow (প্রাথমিক সূচক ট্যাবের জন্য) বা SecondaryTabRow (সেকেন্ডারি সূচক ট্যাবের জন্য) এর ভিতরে ব্যবহৃত হয়।

Tab নিম্নলিখিত মূল পরামিতিগুলি অন্তর্ভুক্ত রয়েছে:

• selected : বর্তমান ট্যাবটি দৃশ্যত হাইলাইট করা হয়েছে কিনা তা নির্ধারণ করে।
• onClick() : একটি প্রয়োজনীয় ল্যাম্বডা ফাংশন যা ব্যবহারকারীর ট্যাবে ক্লিক করার সময় সম্পাদিত ক্রিয়াটি সংজ্ঞায়িত করে। এখানে সাধারণত আপনি নেভিগেশন ইভেন্টগুলি পরিচালনা করেন, নির্বাচিত ট্যাবের অবস্থা আপডেট করেন বা সংশ্লিষ্ট সামগ্রী লোড করেন।
• text : ট্যাবের মধ্যে টেক্সট প্রদর্শন করে। ঐচ্ছিক।
• icon : ট্যাবের মধ্যে একটি আইকন প্রদর্শন করে। ঐচ্ছিক।
• enabled : ট্যাবটি সক্রিয় আছে কিনা এবং এর সাথে ইন্টারঅ্যাক্ট করা যাবে কিনা তা নিয়ন্ত্রণ করে। যদি মিথ্যাতে সেট করা হয়, তাহলে ট্যাবটি একটি অক্ষম অবস্থায় প্রদর্শিত হবে এবং ক্লিকগুলিতে সাড়া দেবে না।

উদাহরণ: ট্যাব-ভিত্তিক নেভিগেশন

নিম্নলিখিত স্নিপেটটি একটি অ্যাপের বিভিন্ন স্ক্রিনের মধ্যে নেভিগেট করার জন্য ট্যাব সহ একটি শীর্ষ নেভিগেশন বার প্রয়োগ করে:

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

গুরুত্বপূর্ণ বিষয়সমূহ

• PrimaryTabRow ট্যাবগুলির একটি অনুভূমিক সারি প্রদর্শন করে, প্রতিটি ট্যাব একটি Destination এর সাথে সম্পর্কিত।
• val navController = rememberNavController() NavHostController এর একটি উদাহরণ তৈরি করে এবং মনে রাখে, যা একটি NavHost মধ্যে নেভিগেশন পরিচালনা করে।
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } নির্বাচিত ট্যাবের অবস্থা পরিচালনা করে।
  • startDestination.ordinal Destination.SONGS enum এন্ট্রির সংখ্যাসূচক সূচক (অবস্থান) পায়।
• যখন আপনি একটি ট্যাবে ক্লিক করেন, তখন onClick lambda সংশ্লিষ্ট স্ক্রিনে নেভিগেট করার জন্য navController.navigate(route = destination.route) কল করে।
• Tab onClick ল্যাম্বডা ক্লিক করা ট্যাবটিকে দৃশ্যমানভাবে হাইলাইট করার জন্য selectedDestination অবস্থা আপডেট করে।
• এটি নির্বাচিত স্ক্রিনের প্রকৃত বিষয়বস্তু প্রদর্শনের জন্য navController এবং startDestination পাশ করে AppNavHost কম্পোজেবল কল করে।

ফলাফল

নিচের ছবিটি পূর্ববর্তী স্নিপেটের ফলাফল দেখায়:

অতিরিক্ত সম্পদ

• উপাদান ৩ - ট্যাব
• কম্পোজের মাধ্যমে নেভিগেশন