ন্যাভিগেশন বার

নেভিগেশন বার ব্যবহারকারীদের একটি অ্যাপের মধ্যে গন্তব্যস্থল থেকে অন্য গন্তব্যে স্যুইচ করার সুযোগ দেয়। আপনার নিম্নলিখিতগুলির জন্য নেভিগেশন বার ব্যবহার করা উচিত:

• সমান গুরুত্বের তিন থেকে পাঁচটি গন্তব্যস্থল
• কমপ্যাক্ট জানালার আকার
• অ্যাপ স্ক্রিন জুড়ে ধারাবাহিক গন্তব্যস্থল

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

এপিআই সারফেস

গন্তব্য স্যুইচিং লজিক বাস্তবায়নের জন্য NavigationBar এবং NavigationBarItem কম্পোজেবল ব্যবহার করুন। প্রতিটি NavigationBarItem একটি একক গন্তব্য প্রতিনিধিত্ব করে।

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

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

উদাহরণ: নীচের নেভিগেশন বার

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

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

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

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

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

ফলাফল

নিচের ছবিটি পূর্ববর্তী স্নিপেট থেকে প্রাপ্ত নেভিগেশন বারটি দেখায়:

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

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