کشوی ناوبری

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

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

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

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

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

شکل 1. نمونه ای از کشوی ناوبری.

مثال

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

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

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 با استفاده از پارامتر 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

ایجاد گروه در کشوی ناوبری

قطعه زیر نحوه ایجاد یک کشوی ناوبری دقیق با بخش ها و تقسیم کننده ها را نشان می دهد:

@Composable
fun DetailedDrawerExample(
    content: @Composable (PaddingValues) -> Unit
) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier.padding(horizontal = 16.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Spacer(Modifier.height(12.dp))
                    Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                    HorizontalDivider()

                    Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Item 1") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 2") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )

                    HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))

                    Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Settings") },
                        selected = false,
                        icon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                        badge = { Text("20") }, // Placeholder
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") },
                        selected = false,
                        icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                        onClick = { /* Handle click */ },
                    )
                    Spacer(Modifier.height(12.dp))
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Navigation Drawer Example") },
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch {
                                if (drawerState.isClosed) {
                                    drawerState.open()
                                } else {
                                    drawerState.close()
                                }
                            }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            content(innerPadding)
        }
    }
}
NavigationDrawer.kt

نکات کلیدی در مورد کد

• drawerContent را با یک Column حاوی بخش‌ها، تقسیم‌کننده‌ها و موارد پیمایش پر می‌کند.
• ModalDrawerSheet یک ظاهر طراحی متریال را برای کشو ارائه می دهد.
• HorizontalDivider بخش هایی را در کشو جدا می کند.
• ModalNavigationDrawer کشو را ایجاد می کند.
• drawerContent محتوای کشو را تعریف می کند.
• در داخل ModalDrawerSheet ، یک Column عناصر کشو را به صورت عمودی مرتب می کند.
• NavigationDrawerItem composable ها نشان دهنده موارد منفرد در کشو هستند.
• Scaffold ساختار اصلی صفحه، از جمله TopAppBar را فراهم می کند.
• navigationIcon در TopAppBar وضعیت باز و بسته شدن کشو را کنترل می کند.

نتیجه

تصویر زیر نشان می دهد که کشو هنگام باز شدن چگونه ظاهر می شود و بخش ها و موارد نمایش داده می شوند:

شکل 2. یک کشوی ناوبری با دو گروه تودرتو باز شد.

منابع اضافی

• طراحی مواد: کشوی ناوبری