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. תיבת דו-שיח שכוללת תמונה.

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