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

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

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

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

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

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

דוגמה

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