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

משטח 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
גורם להרחבה ולכיווץ של התפריט.
התוצאה

יצירת תפריט נפתח ארוך יותר
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
מאפשרת להגדיר את הפעולה שתתבצע כשהמשתמש יבחר פריט בתפריט.
התוצאה
קטע הקוד שלמעלה יוצר את התפריט הבא שאפשר לגלול בו:

יצירת תפריט נפתח ארוך יותר עם קווים מפרידים
בקטע הקוד הבא מוצגת הטמעה מתקדמת יותר של תפריט נפתח. בקטע הקוד הזה, סמלים מובילים וסמלים נגררים מתווספים לפריטים בתפריט, וקווי הפרדה מפרידים בין קבוצות של פריטים בתפריט.
@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
מוסיפים קו אופקי כדי להפריד בין קבוצות של פריטים בתפריט.
התוצאה
קטע הקוד שלמעלה יוצר תפריט נפתח עם סמלים וקווי הפרדה:

מקורות מידע נוספים
- Material Design: Menus