הרכיב 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") } } } } } }
היישום הזה נראה כך: