דו שיח

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

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

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

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

רכיב ה-AlertDialog composable מספק 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 שמספק היקף נוסף להתאמה אישית.

דוגמה בסיסית

הדוגמה הבאה היא הטמעה בסיסית של הקומפוזבל 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. תיבת דו-שיח מינימלית.

דוגמה מתקדמת

הנה הטמעה מתקדמת יותר של הרכיב הקומפוזבילי 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, Victoria, עם לחצן סגירה ולחצן אישור.
איור 4. תיבת דו-שיח שכוללת תמונה.

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