הרכיב Dialog
מציג הודעות קופצות או מבקש מהמשתמשים להזין פרטים
בשכבה שמעל לתוכן הראשי של האפליקציה. היא יוצרת חוויה מפריעה בממשק המשתמש,
למשוך את תשומת הלב של המשתמשים.
דוגמאות לתרחישים לדוגמה של תיבת דו-שיח:
- אישור פעולת המשתמש, למשל מחיקת קובץ.
- בקשה להזנת קלט ממשתמשים, למשל באפליקציה של רשימת משימות.
- הצגת רשימה של אפשרויות לבחירת המשתמש, כמו בחירת מדינה הגדרת פרופיל.
תיבת דו-שיח של התראה
התוכן הקומפוזבילי AlertDialog
מספק API נוח ליצירת
תיבת דו-שיח בנושא עיצוב Material Design. ל-AlertDialog
יש פרמטרים ספציפיים עבור
באלמנטים מסוימים בתיבת הדו-שיח. ביניהם:
title
: הטקסט שמופיע בחלק העליון של תיבת הדו-שיח.text
: הטקסט שמופיע במרכז תיבת הדו-שיח.icon
: הגרפיקה שמופיעה בחלק העליון של תיבת הדו-שיח.onDismissRequest
: הפונקציה שנקראה כשהמשתמש סוגר את תיבת הדו-שיח, למשל, בהקשה מחוץ לו.dismissButton
: תוכן קומפוזבילי שמשמש כלחצן הסגירה.confirmButton
: תוכן קומפוזבילי שמשמש כלחצן האישור.
הדוגמה הבאה מממשת שני לחצנים בתיבת דו-שיח של התראה, והאחד סוגר את תיבת הדו-שיח, ותיבת דו-שיח נוספת שמאשרת את הבקשה.
@OptIn(ExperimentalMaterial3Api::class) @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 ) } } } }
היישום הזה נראה כך:
![תיבת דו-שיח פתוחה של התראה שיש בה לחצן סגירה ואישור.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-alert.png?authuser=8&hl=he)
תיבת דו-שיח קומפוזבילית
Dialog
הוא תוכן קומפוזבילי בסיסי שלא מספק עיצוב או מחשב
משבצות זמן מוגדרות מראש לתוכן. זהו מאגר פשוט יחסית
צריך לאכלס בקונטיינר כמו Card
. אלה כמה דוגמאות
מהם הפרמטרים העיקריים של תיבת דו-שיח:
onDismissRequest
: פונקציית ה-lambda שנקראה כשהמשתמש סוגר את תיבת הדו-שיח.properties
: מופע שלDialogProperties
שמספק היקף נוסף להתאמה אישית.
דוגמה בסיסית
הדוגמה הבאה היא הטמעה בסיסית של התוכן הקומפוזבילי 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, ) } } }
ההטמעה הזאת נראית כך. שימו לב שכשתיבת הדו-שיח פתוחה, התוכן הראשי של האפליקציה שמתחתיו נראה כהה ואפור:
![תיבת דו-שיח שלא מכילה רק תווית.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-minimal.png?authuser=8&hl=he)
דוגמה מתקדמת
זו גרסה מתקדמת יותר של התוכן הקומפוזבילי 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") } } } } } }
היישום הזה נראה כך:
![תיבת דו-שיח עם תמונה של הר פת'רטופ, ויקטוריה. מתחת לתמונה יש לחצן סגירה ולחצן אישור.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-image.png?authuser=8&hl=he)