ট্যাব

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

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

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

এপিআই পৃষ্ঠ

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

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

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

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

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

@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 ল্যাম্বডাটি সংশ্লিষ্ট স্ক্রিনে নেভিগেট করার জন্য navController.navigate(route = destination.route) কল করে।
• Tab onClick ল্যাম্বডা ` selectedDestination স্টেট আপডেট করে ক্লিক করা ট্যাবটিকে দৃশ্যমানভাবে হাইলাইট করে।
• এটি নির্বাচিত স্ক্রিনের প্রকৃত বিষয়বস্তু প্রদর্শন করার জন্য navController এবং startDestination পাস করে AppNavHost কম্পোজেবলকে কল করে।

ফলাফল

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

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

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