संवाद

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

डायलॉग के इस्तेमाल के इन उदाहरणों पर ध्यान दें:

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

अलर्ट डायलॉग

AlertDialog कंपोज़ेबल, मटीरियल डिज़ाइन थीम वाले डायलॉग बनाने के लिए, एक सुविधाजनक एपीआई उपलब्ध कराता है. 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
                )
            }
        }
    }
}

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

खुला हुआ सूचना वाला डायलॉग बॉक्स, जिसमें खारिज करें और पुष्टि करें, दोनों बटन मौजूद हैं.
दूसरी इमेज. बटन वाला अलर्ट डायलॉग.

डायलॉग कंपोज़ेबल

Dialog एक बुनियादी कंपोज़ेबल है, जो कॉन्टेंट के लिए कोई स्टाइलिंग या पहले से तय स्लॉट उपलब्ध नहीं कराता. यह एक आसान कंटेनर है, जिसे आपको Card जैसे कंटेनर से पॉप्युलेट करना चाहिए. यहां डायलॉग के कुछ अहम पैरामीटर दिए गए हैं:

  • onDismissRequest: यह लैम्डा तब कॉल किया जाता है, जब उपयोगकर्ता डायलॉग को बंद करता है.
  • 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 कंपोज़ेबल का एक ज़्यादा बेहतर उदाहरण दिया गया है. इस मामले में, कॉम्पोनेंट मैन्युअल तरीके से, ऊपर दिए गए 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")
                    }
                }
            }
        }
    }
}

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

विक्टोरिया के माउंट फ़ेदरटॉप की फ़ोटो वाला डायलॉग. इमेज के नीचे, खारिज करें और पुष्टि करें बटन दिए गए हैं.
चौथी इमेज. एक डायलॉग, जिसमें इमेज शामिल है.

अन्य संसाधन