Dialog

הרכיב 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")
            }
        }
    )
}
Dialog.kt

מההטמעה הזו משתמע תוכן קומפוזבילי הורה שמעביר ארגומנטים קומפוזביליות של ילדים בצורה הזו:

@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.kt

היישום הזה נראה כך:

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

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,
            )
        }
    }
}
Dialog.kt

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

דוגמה מתקדמת

זו גרסה מתקדמת יותר של התוכן הקומפוזבילי 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")
                    }
                }
            }
        }
    }
}
Dialog.kt

היישום הזה נראה כך:

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

• מסמכי ממשק המשתמש של Material