নেভিগেশন বার

নেভিগেশন বার ব্যবহারকারীদের অ্যাপের মধ্যে গন্তব্য পরিবর্তন করতে দেয়। আপনাকে এগুলির জন্য নেভিগেশন বার ব্যবহার করতে হবে:

• সমান গুরুত্বের তিন থেকে পাঁচটি গন্তব্য
• কম্প্যাক্ট উইন্ডো সাইজ
• অ্যাপ স্ক্রিন জুড়ে একই গন্তব্য

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

API সারফেস

গন্তব্য পরিবর্তন করার লজিক প্রয়োগ করতে 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

Key points

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

ফলাফল

নিচের ছবিতে আগের স্নিপেট থেকে পাওয়া নেভিগেশন বার দেখানো হয়েছে:

অতিরিক্ত রিসোর্স

• Material 3 - নেভিগেশন বার
• Compose-এর মাধ্যমে নেভিগেশন