নেভিগেশন রেল

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

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

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

এপিআই সারফেস

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

ফলাফল

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

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

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