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

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

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

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

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

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

דוגמה

אפשר להשתמש בתוכן הקומפוזבילי 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 אל 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