নেভিগেশন রেল

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

  • শীর্ষ-স্তরের গন্তব্য যা একটি অ্যাপে যেকোন জায়গায় অ্যাক্সেসযোগ্য হতে হবে
  • তিন থেকে সাতটি প্রধান গন্তব্য
  • ট্যাবলেট বা ডেস্কটপ লেআউট
চারটি গন্তব্য (সমস্ত ফাইল, সাম্প্রতিক, ফটো এবং লাইব্রেরি) সহ একটি স্ক্রিনের বাম দিকে একটি উল্লম্ব নেভিগেশন রেল, প্রতিটিতে একটি সংশ্লিষ্ট আইকন এবং একটি ফ্লোটিং অ্যাকশন বোতাম।
চিত্র 1. চারটি গন্তব্য এবং একটি ভাসমান অ্যাকশন বোতাম সহ একটি নেভিগেশন রেল৷

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

API পৃষ্ঠ

আপনার অ্যাপ্লিকেশনে একটি রেল প্রয়োগ করতে NavigationRailItem এর সাথে কম্পোজযোগ্য NavigationRail ব্যবহার করুন। 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)
    }
}

মূল পয়েন্ট

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

ফলাফল

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

সংশ্লিষ্ট আইকন সহ 3টি গন্তব্য সহ একটি উল্লম্ব নেভিগেশন রেল: গান, অ্যালবাম এবং প্লেলিস্ট৷ আইকনগুলি দৃশ্যত রেলের প্রতিটি নেভিগেশন বোতামের উদ্দেশ্য নির্দেশ করে৷ প্রতিটি গন্তব্যের সাথে একটি প্রাসঙ্গিক আইকন যুক্ত থাকে (যেমন, এর জন্য একটি সঙ্গীত নোট
চিত্র 2. একটি নেভিগেশন রেল যাতে সংশ্লিষ্ট আইকন সহ 3টি গন্তব্য রয়েছে: গান, অ্যালবাম এবং প্লেলিস্ট৷

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