תפריטים

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

תפריט נפתח עם שתי אפשרויות. סמל עם שלוש נקודות אנכיות מציין שלחיצה עליו פותחת את התפריט.
איור 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 בלחיצה.
  • הפונקציה onClick lambda בכל 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