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

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

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

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

ב-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