ট্যাব

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

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

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

API পৃষ্ঠ

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

ফলাফল

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

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

• উপাদান 3 - ট্যাব
• রচনা সহ নেভিগেশন