Dialog

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

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

दूसरी इमेज. बटन वाला सूचना डायलॉग.

ध्यान दें: जब उपयोगकर्ता किसी भी बटन पर क्लिक करता है, तो डायलॉग बॉक्स बंद हो जाता है. जब उपयोगकर्ता 'पुष्टि करें' पर क्लिक करता है, तो यह एक ऐसे फ़ंक्शन को कॉल करता है जो पुष्टि को भी हैंडल करता है. इस उदाहरण में, ये फ़ंक्शन onDismissRequest() और onConfirmRequest() हैं.

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

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

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

• onDismissRequest: उपयोगकर्ता के डायलॉग बॉक्स को बंद करने पर, यह फ़ंक्शन कॉल होता है.
• properties: DialogProperties का एक उदाहरण, जो पसंद के मुताबिक बनाने के लिए कुछ और स्कोप देता है.

चेतावनी: पिछले सेक्शन में दिए गए AlertDialog के उदाहरण के मुकाबले, आपको Dialog का साइज़ और आकार मैन्युअल तरीके से बताना होगा. आपको एक अंदरूनी कंटेनर भी देना होगा.

बुनियादी उदाहरण

यहां दिए गए उदाहरण में, 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 उदाहरण से मिलता-जुलता इंटरफ़ेस लागू करता है.

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

@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 यूज़र इंटरफ़ेस (यूआई) वाले दस्तावेज़