संवाद

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")
                    }
                }
            }
        }
    }
}

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

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

अन्य संसाधन