নেভিগেশন রেল

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

• অ্যাপের যেকোনও জায়গা থেকে অ্যাক্সেস করতে হবে এমন টপ-লেভেল ডেস্টিনেশন
• তিন থেকে সাতটি প্রধান গন্তব্য
• ট্যাবলেট বা ডেস্কটপ লেআউট

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

API সারফেস

আপনার অ্যাপ্লিকেশনে রেল ইমপ্লিমেন্ট করতে, NavigationRail-এর সাথে NavigationRailItem কম্পোজ করার সুবিধা ব্যবহার করুন। NavigationRailItem দিয়ে রেল কলামে একটি রেল আইটেম বোঝানো হয়।

NavigationRailItem-এর মধ্যে নিম্নলিখিত মূল প্যারামিটার রয়েছে:

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

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

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

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

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

Key points

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

ফলাফল

নিচের ছবিতে আগের স্নিপেটের ফলাফল দেখানো হয়েছে:

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

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