הרכיב Dialog מציג הודעות של תיבות דו-שיח או מבקש קלט מהמשתמש בשכבה שמעל לתוכן הראשי של האפליקציה. הן מפריעות לחוויית המשתמש כדי למשוך את תשומת הלב שלו.
אלה כמה דוגמאות לתרחישים לדוגמה שבהם אפשר להשתמש בתיבת דו-שיח:
- אישור פעולת משתמש, כמו מחיקת קובץ.
- בקשת קלט מהמשתמש, כמו באפליקציה של רשימת משימות.
- הצגת רשימה של אפשרויות לבחירת המשתמש, כמו בחירת מדינה בהגדרת פרופיל.
תיבת דו-שיח של התראה
הפונקציה הקומפוזבילית AlertDialog מספקת API נוח ליצירת תיבת דו-שיח עם עיצוב Material Design. ל-AlertDialog יש פרמטרים ספציפיים לטיפול באלמנטים מסוימים של תיבת הדו-שיח. למשל:
-
title: הטקסט שמופיע בחלק העליון של תיבת הדו-שיח. -
text: הטקסט שמופיע במרכז תיבת הדו-שיח. -
icon: הגרפיקה שמופיעה בחלק העליון של תיבת הדו-שיח. -
onDismissRequest: הפונקציה שמופעלת כשהמשתמש סוגר את תיבת הדו-שיח, למשל על ידי לחיצה מחוץ לה. -
dismissButton: רכיב Composable שמשמש כלחצן הסגירה. -
confirmButton: רכיב Composable שמשמש כלחצן האישור.
בדוגמה הבאה מוטמעים שני לחצנים בתיבת דו-שיח של התראה: אחד שסוגר את תיבת הדו-שיח ואחד שמאשר את הבקשה.
@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 ) } } } }
ההטמעה הזו נראית כך:
רכיב Composable של תיבת דו-שיח
Dialog הוא רכיב Composable בסיסי שלא מספק סגנון או משבצות מוגדרות מראש לתוכן. זהו מאגר פשוט יחסית שצריך לאכלס במאגר כמו Card. אלה כמה מהפרמטרים העיקריים של תיבת דו-שיח:
-
onDismissRequest: פונקציית הלמבדה שמופעלת כשהמשתמש סוגר את תיבת הדו-שיח. -
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, ) } } }
ההטמעה הזו נראית כך. שימו לב שכאשר תיבת הדו-שיח פתוחה, התוכן הראשי של האפליקציה שמתחתיה מופיע כהה ואפור:
דוגמה מתקדמת
הדוגמה הבאה היא הטמעה מתקדמת יותר של הרכיב הקומפוזבילי 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") } } } } } }
ההטמעה הזו נראית כך: