کشوی ناوبری

جزء کشوی ناوبری یک منوی کشویی است که به کاربران امکان می دهد به بخش های مختلف برنامه شما پیمایش کنند. کاربران می توانند با کشیدن انگشت از کناره یا ضربه زدن روی نماد منو، آن را فعال کنند.

این سه مورد استفاده را برای اجرای یک کشو ناوبری در نظر بگیرید:

• سازماندهی محتوا: کاربران را قادر می سازد تا بین دسته های مختلف جابجا شوند، مانند برنامه های اخبار یا وبلاگ نویسی.
• مدیریت حساب: پیوندهای سریعی به تنظیمات حساب و بخش‌های نمایه در برنامه‌های دارای حساب کاربری ارائه دهید.
• کشف ویژگی: چندین ویژگی و تنظیمات را در یک منو سازماندهی کنید تا کشف و دسترسی کاربر در برنامه های پیچیده را تسهیل کند.

در طراحی متریال، دو نوع کشو ناوبری وجود دارد:

• استاندارد: فضای داخل صفحه را با محتوای دیگر به اشتراک بگذارید.
• Modal: در بالای محتوای دیگر در یک صفحه ظاهر می شود.

مثال

می‌توانید از ModalNavigationDrawer برای پیاده‌سازی یک کشوی ناوبری استفاده کنید.

از شکاف drawerContent برای ارائه ModalDrawerSheet و ارائه محتویات کشو مانند مثال زیر استفاده کنید:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            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 را با استفاده از پارامتر drawerState به ModalNavigationDrawer منتقل کنید.

DrawerState دسترسی به عملکردهای open و close و همچنین ویژگی های مربوط به وضعیت کشو فعلی را فراهم می کند. این توابع تعلیق نیاز به یک CoroutineScope دارند که می توانید با استفاده از rememberCoroutineScope آن را نمونه سازی کنید. همچنین می‌توانید توابع تعلیق را در پاسخ به رویدادهای رابط کاربری فراخوانی کنید.

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