Dialog

הרכיב Dialog מציג הודעות קופצות או בקשות להזנת משתמש בשכבה מעל תוכן האפליקציה הראשי. הוא יוצר חוויית ממשק משתמש מפריעה כדי למשוך את תשומת הלב של המשתמשים.

תרחישים לדוגמה לשימוש בתיבת דו-שיח:

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

תיבת דו-שיח של התראה

הרכיב הניתן לקיבוץ 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
                )
            }
        }
    }
}

ההטמעה הזו נראית כך:

תיבת דו-שיח פתוחה של התראה עם לחצן סגירה וגם לחצן אישור.
איור 2. תיבת דו-שיח של התראה עם לחצנים.

תיבת דו-שיח קומפוזיציונית

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,
            )
        }
    }
}

ההטמעה הזו נראית כך. שימו לב שכשהתיבה נפתחת, תוכן האפליקציה הראשי שמתחתיה מופיע כהה ואפור:

תיבת דו-שיח שלא מכילה שום דבר מלבד תווית.
איור 3. תיבת דו-שיח מינימלית.

דוגמה מתקדמת

בהמשך מופיעה הטמעה מתקדמת יותר של ה-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")
                    }
                }
            }
        }
    }
}

ההטמעה הזו נראית כך:

תיבת דו-שיח עם תמונה של הר פאתרטופ (Mount Feathertop), ויקטוריה. מתחת לתמונה מופיעים לחצן סגירה ולחצן אישור.
איור 4. תיבת דו-שיח עם תמונה.

מקורות מידע נוספים