תפריטים

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

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

פלטפורמת ה-API

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

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

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

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

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

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

בקטע הקוד הבא מוצגת הטמעה מינימלית של 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... */ }
            )
        }
    }
}

מידע חשוב על הקוד

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

התוצאה

תפריט נפתח שמופעל על ידי סמל עם שלוש נקודות אנכיות. בתפריט מוצגות שתי אפשרויות לבחירה: אפשרות 1 ואפשרות 2.
איור 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... */ }
                )
            }
        }
    }
}

מידע חשוב על הקוד

  • אפשר לגלול בDropdownMenu אם הגובה הכולל של התוכן שלו גדול מהשטח הזמין. הקוד הזה יוצר רשימה עם אפשרות גלילה DropdownMenu שמציגה 100 פריטים של placeholder.
  • הלולאה forEach יוצרת באופן דינמי רכיבי DropdownMenuItem composable. הפריטים לא נוצרים באופן עצלני, כלומר כל 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... */ }
            )
        }
    }
}

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

מידע חשוב על הקוד

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

התוצאה

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

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

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

  • ‫Material Design: Menus