תפריטים

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

איור 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 פריטים של פלייסהולדרים.
• הלולאה forEach יוצרת באופן דינמי רכיבים קומפוזביליים מסוג DropdownMenuItem. הפריטים לא נוצרים באופן מדורג, כלומר כל 100 הפריטים בתפריט הנפתח נוצרים וקיימים בקומפוזיציה.
• ה-IconButton מפעיל את ההרחבה והכיווץ של ה-DropdownMenu כשלוחצים עליו.
• ה-lambda של 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, שכל אחד מהם מייצג פעולה שאפשר לבחור.
• רכיבי ה-composable מסוג HorizontalDivider מוסיפים קו אופקי כדי להפריד בין קבוצות של פריטים בתפריט.

תוצאה

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

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

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

• ‫Material Design: תפריטים