নেভিগেশন ড্রয়ার

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

একটি নেভিগেশন ড্রয়ার বাস্তবায়নের জন্য এই তিনটি ব্যবহারের ক্ষেত্রে বিবেচনা করুন:

• বিষয়বস্তু সংগঠন: ব্যবহারকারীদের বিভিন্ন বিভাগের মধ্যে পরিবর্তন করতে সক্ষম করুন, যেমন সংবাদ বা ব্লগিং অ্যাপে।
• অ্যাকাউন্ট ম্যানেজমেন্ট: ব্যবহারকারী অ্যাকাউন্টের সাথে অ্যাপে অ্যাকাউন্ট সেটিংস এবং প্রোফাইল বিভাগে দ্রুত লিঙ্ক সরবরাহ করুন।
• বৈশিষ্ট্য আবিষ্কার: একটি একক মেনুতে একাধিক বৈশিষ্ট্য এবং সেটিংস সংগঠিত করুন যাতে ব্যবহারকারীর আবিষ্কার এবং জটিল অ্যাপগুলিতে অ্যাক্সেস সহজতর হয়৷

মেটেরিয়াল ডিজাইনে, দুটি ধরণের নেভিগেশন ড্রয়ার রয়েছে:

• স্ট্যান্ডার্ড: অন্যান্য সামগ্রীর সাথে একটি স্ক্রিনের মধ্যে স্থান ভাগ করুন।
• মডেল: একটি স্ক্রিনের মধ্যে অন্যান্য সামগ্রীর শীর্ষে প্রদর্শিত হয়।

উদাহরণ

আপনি একটি নেভিগেশন ড্রয়ার বাস্তবায়ন করতে ModalNavigationDrawer কম্পোজযোগ্য ব্যবহার করতে পারেন।

একটি ModalDrawerSheet প্রদান করতে এবং ড্রয়ারের বিষয়বস্তু প্রদান করতে drawerContent স্লট ব্যবহার করুন, নিম্নলিখিত উদাহরণের মতো:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer একাধিক অতিরিক্ত ড্রয়ার প্যারামিটার গ্রহণ করে। উদাহরণস্বরূপ, নিচের উদাহরণের মতো gesturesEnabled প্যারামিটার দিয়ে ড্রয়ারটি ড্র্যাগের প্রতিক্রিয়া জানাবে কি না তা আপনি টগল করতে পারেন:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

আচরণ নিয়ন্ত্রণ করুন

ড্রয়ারটি কীভাবে খোলে এবং বন্ধ হয় তা নিয়ন্ত্রণ করতে, DrawerState ব্যবহার করুন। drawerState প্যারামিটার ব্যবহার করে আপনাকে ModalNavigationDrawer এ একটি DrawerState পাস করা উচিত।

DrawerState open এবং close ফাংশন, সেইসাথে বর্তমান ড্রয়ারের অবস্থার সাথে সম্পর্কিত বৈশিষ্ট্যগুলিতে অ্যাক্সেস সরবরাহ করে। এই সাসপেন্ডিং ফাংশনগুলির জন্য একটি CoroutineScope প্রয়োজন, যেটি আপনি rememberCoroutineScope ব্যবহার করে ইনস্ট্যান্টিয়েট করতে পারেন। আপনি UI ইভেন্টগুলির প্রতিক্রিয়া হিসাবে সাসপেন্ডিং ফাংশনগুলিকে কল করতে পারেন৷

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt