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