הרכיב Dialog
מציג הודעות קופצות או בקשות להזנת משתמש בשכבה מעל תוכן האפליקציה הראשי. הוא יוצר חוויית ממשק משתמש מפריעה כדי למשוך את תשומת הלב של המשתמשים.
תרחישים לדוגמה לשימוש בתיבת דו-שיח:
- אישור פעולת המשתמש, למשל מחיקת קובץ.
- בקשה לקלט של משתמש, למשל באפליקציה של רשימת משימות.
- הצגת רשימת אפשרויות לבחירת המשתמשים, כמו בחירת מדינה בהגדרת הפרופיל.
תיבת דו-שיח של התראה
הרכיב הניתן לקיבוץ AlertDialog
מספק ממשק API נוח ליצירת תיבת דו-שיח בסגנון Material Design. ל-AlertDialog
יש פרמטרים ספציפיים לטיפול ברכיבים מסוימים של תיבת הדו-שיח. בין היתר:
title
: הטקסט שמופיע בחלק העליון של תיבת הדו-שיח.text
: הטקסט שמופיע במרכז תיבת הדו-שיח.icon
: הגרפיקה שמופיעה בחלק העליון של תיבת הדו-שיח.onDismissRequest
: הפונקציה שנקראת כשהמשתמש סוגר את תיבת הדו-שיח, למשל על ידי הקשה מחוץ אליה.dismissButton
: רכיב מורכב שמשמש כלחצן הסגירה.confirmButton
: רכיב מורכב שמשמש כלחצן אישור.
בדוגמה הבאה מוטמעים שני לחצנים בתיבת דו-שיח של התראה, אחד שסוגר את תיבת הדו-שיח והשני שמאשר את הבקשה שלה.
@Composable fun AlertDialogExample( onDismissRequest: () -> Unit, onConfirmation: () -> Unit, dialogTitle: String, dialogText: String, icon: ImageVector, ) { AlertDialog( icon = { Icon(icon, contentDescription = "Example Icon") }, title = { Text(text = dialogTitle) }, text = { Text(text = dialogText) }, onDismissRequest = { onDismissRequest() }, confirmButton = { TextButton( onClick = { onConfirmation() } ) { Text("Confirm") } }, dismissButton = { TextButton( onClick = { onDismissRequest() } ) { Text("Dismiss") } } ) }
ההטמעה הזו מתייחסת לרכיב קומפוזיציה הורה שמעביר ארגומנטים לרכיב הקומפוזיציה הצאצא באופן הבא:
@Composable fun DialogExamples() { // ... val openAlertDialog = remember { mutableStateOf(false) } // ... when { // ... openAlertDialog.value -> { AlertDialogExample( onDismissRequest = { openAlertDialog.value = false }, onConfirmation = { openAlertDialog.value = false println("Confirmation registered") // Add logic here to handle confirmation. }, dialogTitle = "Alert dialog example", dialogText = "This is an example of an alert dialog with buttons.", icon = Icons.Default.Info ) } } } }
ההטמעה הזו נראית כך:
תיבת דו-שיח קומפוזיציונית
Dialog
הוא רכיב מורכב בסיסי שלא מספק סגנון או משבצות מוגדרות מראש לתוכן. זהו קונטיינר פשוט יחסית שצריך לאכלס בקונטיינר כמו Card
. ריכזנו כאן כמה מהפרמטרים העיקריים של תיבת דו-שיח:
onDismissRequest
: פונקציית הלוגריתם הרגולרי (lambda) שנקראת כשהמשתמש סוגר את תיבת הדו-שיח.properties
: מופע שלDialogProperties
שמספק היקף נוסף של התאמה אישית.
דוגמה בסיסית
הדוגמה הבאה היא הטמעה בסיסית של ה-composable Dialog
. שימו לב שהוא משתמש ב-Card
בתור הקונטיינר המשני. בלי Card
, הרכיב Text
יופיע לבד מעל לתוכן הראשי של האפליקציה.
@Composable fun MinimalDialog(onDismissRequest: () -> Unit) { Dialog(onDismissRequest = { onDismissRequest() }) { Card( modifier = Modifier .fillMaxWidth() .height(200.dp) .padding(16.dp), shape = RoundedCornerShape(16.dp), ) { Text( text = "This is a minimal dialog", modifier = Modifier .fillMaxSize() .wrapContentSize(Alignment.Center), textAlign = TextAlign.Center, ) } } }
ההטמעה הזו נראית כך. שימו לב שכשהתיבה נפתחת, תוכן האפליקציה הראשי שמתחתיה מופיע כהה ואפור:
דוגמה מתקדמת
בהמשך מופיעה הטמעה מתקדמת יותר של ה-composable Dialog
. במקרה כזה, הרכיב מטמיע באופן ידני ממשק דומה לדוגמה AlertDialog
שלמעלה.
@Composable fun DialogWithImage( onDismissRequest: () -> Unit, onConfirmation: () -> Unit, painter: Painter, imageDescription: String, ) { Dialog(onDismissRequest = { onDismissRequest() }) { // Draw a rectangle shape with rounded corners inside the dialog Card( modifier = Modifier .fillMaxWidth() .height(375.dp) .padding(16.dp), shape = RoundedCornerShape(16.dp), ) { Column( modifier = Modifier .fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { Image( painter = painter, contentDescription = imageDescription, contentScale = ContentScale.Fit, modifier = Modifier .height(160.dp) ) Text( text = "This is a dialog with buttons and an image.", modifier = Modifier.padding(16.dp), ) Row( modifier = Modifier .fillMaxWidth(), horizontalArrangement = Arrangement.Center, ) { TextButton( onClick = { onDismissRequest() }, modifier = Modifier.padding(8.dp), ) { Text("Dismiss") } TextButton( onClick = { onConfirmation() }, modifier = Modifier.padding(8.dp), ) { Text("Confirm") } } } } } }
ההטמעה הזו נראית כך: