חלונית הזזה לניווט

הרכיב תפריט הניווט הוא תפריט נפתח שמאפשר למשתמשים לנווט לקטעים שונים באפליקציה. המשתמשים יכולים להפעיל אותו על ידי החלקה מהצד או הקשה על סמל תפריט.

ריכזנו כאן שלושה תרחישים לדוגמה להטמעת חלונית ניווט:

• ארגון תוכן: מאפשרים למשתמשים לעבור בין קטגוריות שונות, למשל באפליקציות חדשות או בבלוגים.
• ניהול חשבון: הצגת קישורים מהירים להגדרות החשבון ולקטעי הפרופיל באפליקציות עם חשבונות משתמשים.
• גילוי תכונות: ארגון של כמה תכונות והגדרות בתפריט אחד כדי להקל על המשתמשים לגלות את התכונות ולגשת אליהן באפליקציות מורכבות.

ב-Material Design יש שני סוגים של תיבות ניווט:

• רגיל: שיתוף שטח במסך עם תוכן אחר.
• מודל: מופיע מעל תוכן אחר במסך.

דוגמה

אפשר להשתמש ברכיב ה-composable 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 אל ModalNavigationDrawer באמצעות הפרמטר drawerState.

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