תפריטים

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

איור 1. תפריט נפתח בסיסי עם שני פריטים.

ממשק API

כדי להטמיע תפריט נפתח בהתאמה אישית, משתמשים ברכיבים DropdownMenu, DropdownMenuItem ו-IconButton. הרכיבים DropdownMenu ו-DropdownMenuItem משמשים להצגת הפריטים בתפריט, והרכיב IconButton הוא הטריגר להצגה או להסתרה של התפריט הנפתח.

הפרמטרים העיקריים של הרכיב DropdownMenu כוללים את הפרמטרים הבאים:

• expanded: מציין אם התפריט גלוי.
• onDismissRequest: משמש לטיפול בסגירת התפריט.
• content: התוכן הקומפוזיבי של התפריט, שבדרך כלל מכיל DropdownMenuItem רכיבים קומפוזיבלים.

הפרמטרים העיקריים של DropdownMenuItem כוללים את הפרמטרים הבאים:

• text: מגדיר את התוכן שמוצג באפשרות בתפריט.
• onClick: קריאה חוזרת (callback) לטיפול באינטראקציה עם הפריט בתפריט.

יצירת תפריט נפתח בסיסי

קטע הקוד הבא מדגים הטמעה מינימלית של DropdownMenu:

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

נקודות עיקריות לגבי הקוד

• הגדרה של DropdownMenu בסיסי שמכיל שני פריטי תפריט.
• הפרמטר expanded קובע אם התפריט יוצג מורחב או מכווץ.
• הפרמטר onDismissRequest מגדיר פונקציית קריאה חוזרת (callback) שתתבצע כשהמשתמש סוגר את התפריט.
• הרכיב הניתן לקישור DropdownMenuItem מייצג פריטים שניתן לבחור בתפריט הנפתח.
• הלחצן IconButton מפעיל את ההרחבה והכיווץ של התפריט.

התוצאה

איור 2. תפריט נפתח מינימלי עם שתי אפשרויות בלבד.

יצירת תפריט נפתח ארוך יותר

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

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    // Placeholder list of 100 strings for demonstration
    val menuItemData = List(100) { "Option ${it + 1}" }

    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}
Menus.kt

נקודות עיקריות לגבי הקוד

• אפשר לגלול ב-DropdownMenu כשהגובה הכולל של התוכן שלו חורג מהמקום הזמין. הקוד הזה יוצר DropdownMenu שאפשר לגלול בו, שבו מוצגים 100 פריטים של placeholder.
• הלולאה forEach יוצרת באופן דינמי רכיבים של DropdownMenuItem. הפריטים לא נוצרים באופן עצל, כלומר כל 100 הפריטים ברשימה הנפתחת נוצרים וקיימים ב-Composition.
• כשלוחצים על IconButton, הוא מפעיל את ההרחבה והכיווץ של DropdownMenu.
• פונקציית הלמהדה onClick בתוך כל DropdownMenuItem מאפשרת לכם להגדיר את הפעולה שתתבצע כשהמשתמש יבחר פריט תפריט.

התוצאה

קטע הקוד שלמעלה יוצר את התפריט הניתן לגלילה הבא:

איור 3. תפריט נפתח ארוך שניתן לגלילה.

יצירת תפריט נפתח ארוך יותר עם מחיצות

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

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

הקוד הזה מגדיר DropdownMenu בתוך Box.

נקודות עיקריות לגבי הקוד

• הפרמטרים leadingIcon ו-trailingIcon מוסיפים סמלים לתחילת ולסוף של DropdownMenuItem.
• הלחצן IconButton מפעיל את הרחבת התפריט.
• ה-DropdownMenu מכיל כמה רכיבים של DropdownMenuItem, שכל אחד מהם מייצג פעולה שאפשר לבחור.
• רכיבי HorizontalDivider מורכבים מוסיפים קו אופקי כדי להפריד בין קבוצות של פריטים בתפריט.

התוצאה

קטע הקוד הקודם יוצר תפריט נפתח עם סמלים ומחיצות:

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

מקורות מידע נוספים

• Material Design: תפריטים