Dialog

Dialog कॉम्पोनेंट, पॉप-अप मैसेज दिखाता है या किसी लेयर होती है. यह रुकावट पैदा करने वाला यूज़र इंटरफ़ेस (यूआई) अनुभव देता है, उपयोगकर्ताओं का ध्यान खींचें.

डायलॉग बॉक्स के इस्तेमाल के कुछ उदाहरण यहां दिए गए हैं:

• उपयोगकर्ता की कार्रवाई की पुष्टि करना, जैसे कि किसी फ़ाइल को मिटाते समय.
• उपयोगकर्ता के इनपुट का अनुरोध करना, जैसे कि काम की सूची वाले ऐप्लिकेशन में.
• आपको उपयोगकर्ता को चुनने के लिए विकल्पों की सूची देनी होगी. जैसे, कोई देश चुनना प्रोफ़ाइल सेटअप करते हैं.

अलर्ट संवाद

AlertDialog कंपोज़ेबल, मटीरियल डिज़ाइन थीम वाला डायलॉग बॉक्स. 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

यह लागू होने का तरीका इस तरह दिखता है:

अन्य संसाधन

• यूज़र इंटरफ़ेस (यूआई) के मटीरियल के दस्तावेज़