নেভিগেশন রেল

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

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

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

এপিআই পৃষ্ঠ

আপনার অ্যাপ্লিকেশনে একটি রেইল বাস্তবায়ন করতে 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 ল্যাম্বডাটি selectedDestination স্টেট আপডেট করে, যার ফলে ক্লিক করা রেইল আইটেমটি দৃশ্যমানভাবে হাইলাইট হয়।
  • এটি নির্বাচিত স্ক্রিনের প্রকৃত বিষয়বস্তু প্রদর্শন করার জন্য navController এবং startDestination পাস করে AppNavHost কম্পোজেবলকে কল করে।

ফলাফল

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

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

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