📌 Jetpack Compose-এ Navigation Stack সহজভাবে বুঝুন!

 

📌 Jetpack Compose-এ Navigation Stack সহজভাবে বুঝুন!

🧠 একটি সাধারণ উদাহরণ দিয়ে ভাবুন:
আপনি যদি YouTube অ্যাপে থাকেন, তাহলে কী হয়?

• 🏠 হোম স্ক্রিন → 🎥 ভিডিও স্ক্রিন → 📋 কমেন্ট স্ক্রিন
• যদি Back Button চাপেন, তাহলে কি হবে?
  • আপনি 📋 কমেন্ট স্ক্রিন থেকে 🎥 ভিডিও স্ক্রিনে ফিরবেন।
  • আবার Back চাপলে 🏠 হোম স্ক্রিনে ফিরবেন।

👉 এটি হচ্ছে Navigation Stack!

---

✅ Navigation Stack কী?

Navigation Stack এমন একটি স্ট্যাক (Stack Data Structure) যেখানে Screen (Destination) গুলো ধাপে ধাপে Push & Pop হয়!

✋ Stack-এর কাজ বুঝতে ছোট উদাহরণ দেখুন:

ক্রিয়াকলাপ	Navigation Stack	ব্যাখ্যা
navigate("ScreenB")	[🏠 হোম] → [🎥 ভিডিও]	নতুন স্ক্রিন Push (যোগ) হলো
navigate("ScreenC")	[🏠 হোম] → [🎥 ভিডিও] → [📋 কমেন্ট]	আরেকটি স্ক্রিন Push হলো
Back Button	[🏠 হোম] → [🎥 ভিডিও]	লাস্ট স্ক্রিন Pop (সরিয়ে ফেলা) হলো

🔥 এভাবেই Navigation Stack কাজ করে!

---

✅ Jetpack Compose-এ Navigation Stack ব্যবহার

Jetpack Compose-এ Navigation Component ব্যবহার করে সহজেই Navigation Stack হ্যান্ডেল করা যায়!

1️⃣ Navigation Controller সেটআপ করুন

প্রথমে NavController তৈরি করুন 👇

val navController = rememberNavController()

2️⃣ Navigation Host সেট করুন

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen(navController) }
    composable("video") { VideoScreen(navController) }
    composable("comment") { CommentScreen(navController) }
}

🚀 এখানে "home", "video", "comment" হলো Navigation Destinations বা Screen Routes!

---

✅ কিভাবে Navigate (পেজ পরিবর্তন) করবেন?

📌 নতুন স্ক্রিনে যেতে navController.navigate(route) ব্যবহার করুন!

Button(onClick = { navController.navigate("video") }) {
    Text("Go to Video Screen")
}

👉 এটি "video" স্ক্রিনে নিয়ে যাবে (Stack-এ নতুন স্ক্রিন Push হবে!)

---

✅ কিভাবে Back Navigate করবেন?

📌 Back যেতে navController.popBackStack() ব্যবহার করুন!

Button(onClick = { navController.popBackStack() }) {
    Text("Go Back")
}

👉 এটি বর্তমান স্ক্রিন Stack থেকে সরিয়ে ফেলবে (Pop করবে!)

---

✅ যদি Stack-এ থাকা সব স্ক্রিন ক্লিয়ার করতে চান?

👉 Back Stack ক্লিয়ার করে নির্দিষ্ট স্ক্রিনে যাওয়ার জন্য:

navController.navigate("home") {
    popUpTo(0)  // সবকিছু Remove করবে
}

📌 এটি "home" স্ক্রিন রেখে বাকি সব স্ক্রিন রিমুভ করবে!

---

✅ এগুলো একসাথে কোড করলে কেমন হবে?

@Composable
fun HomeScreen(navController: NavController) {
    Column {
        Text("🏠 Home Screen", fontSize = 24.sp)
        Button(onClick = { navController.navigate("video") }) {
            Text("Go to Video Screen")
        }
    }
}

@Composable
fun VideoScreen(navController: NavController) {
    Column {
        Text("🎥 Video Screen", fontSize = 24.sp)
        Button(onClick = { navController.navigate("comment") }) {
            Text("Go to Comment Screen")
        }
        Button(onClick = { navController.popBackStack() }) {
            Text("Go Back")
        }
    }
}

@Composable
fun CommentScreen(navController: NavController) {
    Column {
        Text("📋 Comment Screen", fontSize = 24.sp)
        Button(onClick = { navController.popBackStack() }) {
            Text("Go Back")
        }
    }
}

---

📌 সংক্ষেপে মনে রাখুন:

• navController.navigate("route") → নতুন স্ক্রিনে যাবে (Push)
• navController.popBackStack() → Back (Pop) হবে
• popUpTo("route") → কিছু স্ক্রিন Stack থেকে Remove করবে
• popUpTo(0) → সব Stack ক্লিয়ার করবে

---

✅ এখন সহজভাবে Navigation Stack ব্যবহার করতে পারবেন! 🚀
কোনো সমস্যা হলে আমাকে জানান! 😊