সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
Dialog উপাদানটি ডায়ালগ বার্তাগুলি প্রদর্শন করে বা মূল অ্যাপ সামগ্রীর উপরে একটি স্তরে ব্যবহারকারীর ইনপুট অনুরোধ করে। এটি ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য একটি বাধামূলক UI অভিজ্ঞতা তৈরি করে।
একটি ডায়ালগের জন্য ব্যবহারের ক্ষেত্রে নিম্নলিখিতগুলি হল:
ব্যবহারকারীর ক্রিয়া নিশ্চিত করা, যেমন একটি ফাইল মুছে ফেলার সময়।
ব্যবহারকারীর ইনপুট অনুরোধ করা, যেমন একটি করণীয় তালিকা অ্যাপে।
ব্যবহারকারী নির্বাচনের জন্য বিকল্পগুলির একটি তালিকা উপস্থাপন করা, যেমন একটি প্রোফাইল সেটআপে একটি দেশ বেছে নেওয়া।
চিত্র 1. টেক্সট এবং আইকন সহ একটি ডায়ালগের উদাহরণ।
সতর্ক সংলাপ
AlertDialog composable একটি মেটেরিয়াল ডিজাইন থিমযুক্ত ডায়ালগ তৈরি করার জন্য একটি সুবিধাজনক API প্রদান করে। AlertDialog এর ডায়ালগের নির্দিষ্ট উপাদানগুলি পরিচালনা করার জন্য নির্দিষ্ট পরামিতি রয়েছে। তাদের মধ্যে নিম্নলিখিত:
title : ডায়ালগের শীর্ষ বরাবর প্রদর্শিত পাঠ্য।
text : ডায়ালগের মধ্যে কেন্দ্রীভূত পাঠ্য।
icon : ডায়ালগের শীর্ষে প্রদর্শিত গ্রাফিক।
onDismissRequest : ব্যবহারকারী যখন ডায়ালগটি খারিজ করে, যেমন এর বাইরে ট্যাপ করে তখন ফাংশনটিকে বলা হয়।
dismissButton : একটি সংমিশ্রণযোগ্য যা খারিজ বোতাম হিসাবে কাজ করে।
confirmButton : একটি সংমিশ্রণযোগ্য যা নিশ্চিত বোতাম হিসাবে কাজ করে।
নিম্নলিখিত উদাহরণটি একটি সতর্কতা ডায়ালগে দুটি বোতাম প্রয়োগ করে, একটি যা ডায়ালগটিকে খারিজ করে এবং অন্যটি এটির অনুরোধ নিশ্চিত করে৷
এই বাস্তবায়নটি একটি অভিভাবক কম্পোজেবলকে বোঝায় যা এইভাবে শিশুর কাছে কম্পোজেবল আর্গুমেন্ট পাস করে:
@ComposablefunDialogExamples(){// ...valopenAlertDialog=remember{mutableStateOf(false)}// ...when{// ...openAlertDialog.value->{AlertDialogExample(onDismissRequest={openAlertDialog.value=false},onConfirmation={openAlertDialog.value=falseprintln("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 উপাদানটি একা প্রদর্শিত হবে।
@ComposablefunMinimalDialog(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,)}}}
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে. মনে রাখবেন যে ডায়ালগ খোলা থাকলে, এর নীচের প্রধান অ্যাপের বিষয়বস্তু অন্ধকার এবং ধূসর দেখায়:
চিত্র 3. ন্যূনতম ডায়ালগ।
উন্নত উদাহরণ
নিম্নলিখিতটি Dialog কম্পোজেবলের আরও উন্নত প্রয়োগ করা হয়েছে। এই ক্ষেত্রে, উপাদানটি ম্যানুয়ালি উপরের AlertDialog উদাহরণের অনুরূপ ইন্টারফেস প্রয়োগ করে।
@ComposablefunDialogWithImage(onDismissRequest:()->Unit,onConfirmation:()->Unit,painter:Painter,imageDescription:String,){Dialog(onDismissRequest={onDismissRequest()}){// Draw a rectangle shape with rounded corners inside the dialogCard(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")}}}}}}
এই পৃষ্ঠার কন্টেন্ট ও কোডের নমুনাগুলি Content License-এ বর্ণিত লাইসেন্সের অধীনস্থ। Java এবং OpenJDK হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2025-08-27 UTC-তে শেষবার আপডেট করা হয়েছে।
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2025-08-27 UTC-তে শেষবার আপডেট করা হয়েছে।"],[],[],null,["The [`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) component displays dialog messages or requests user input on a\nlayer above the main app content. It creates an interruptive UI experience to\ncapture user attention.\n\nAmong the use cases for a dialog are the following:\n\n- Confirming user action, such as when deleting a file.\n- Requesting user input, such as in a to-do list app.\n- Presenting a list of options for user selection, like choosing a country in a profile setup.\n\n**Figure 1.** An example of a dialog populated with text and icons.\n\nAlert dialog\n\nThe [`AlertDialog`](/reference/kotlin/androidx/compose/material3/package-summary#AlertDialog(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.DialogProperties)) composable provides a convenient API for creating a\nMaterial Design themed dialog. `AlertDialog` has specific parameters for\nhandling particular elements of the dialog. Among them are the following:\n\n- `title`: The text that appears along the top of the dialog.\n- `text`: The text that appears centered within the dialog.\n- `icon`: The graphic that appears at the top of the dialog.\n- `onDismissRequest`: The function called when the user dismisses the dialog, such as by tapping outside of it.\n- `dismissButton`: A composable that serves as the dismiss button.\n- `confirmButton`: A composable that serves as the confirm button.\n\nThe following example implements two buttons in an alert dialog, one that\ndismisses the dialog, and another that confirms its request.\n\n\n```kotlin\n@Composable\nfun AlertDialogExample(\n onDismissRequest: () -\u003e Unit,\n onConfirmation: () -\u003e Unit,\n dialogTitle: String,\n dialogText: String,\n icon: ImageVector,\n) {\n AlertDialog(\n icon = {\n Icon(icon, contentDescription = \"Example Icon\")\n },\n title = {\n Text(text = dialogTitle)\n },\n text = {\n Text(text = dialogText)\n },\n onDismissRequest = {\n onDismissRequest()\n },\n confirmButton = {\n TextButton(\n onClick = {\n onConfirmation()\n }\n ) {\n Text(\"Confirm\")\n }\n },\n dismissButton = {\n TextButton(\n onClick = {\n onDismissRequest()\n }\n ) {\n Text(\"Dismiss\")\n }\n }\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Dialog.kt#L222-L262\n```\n\n\u003cbr /\u003e\n\nThis implementation implies a parent composable that passes arguments to the\nchild composable in this way:\n\n\n```kotlin\n@Composable\nfun DialogExamples() {\n // ...\n val openAlertDialog = remember { mutableStateOf(false) }\n\n // ...\n when {\n // ...\n openAlertDialog.value -\u003e {\n AlertDialogExample(\n onDismissRequest = { openAlertDialog.value = false },\n onConfirmation = {\n openAlertDialog.value = false\n println(\"Confirmation registered\") // Add logic here to handle confirmation.\n },\n dialogTitle = \"Alert dialog example\",\n dialogText = \"This is an example of an alert dialog with buttons.\",\n icon = Icons.Default.Info\n )\n }\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Dialog.kt#L59-L137\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as follows:\n**Figure 2.** An alert dialog with buttons. **Note:** When the user clicks either of the buttons, the dialog closes. When the user clicks confirm, it calls a function that also handles the confirmation. In this example, those functions are `onDismissRequest()` and `onConfirmRequest()`.\n| **Note:** In cases where your dialog requires a more complex set of buttons, you may benefit from using the `Dialog` composable and populating it in a more freeform manner.\n\nDialog composable\n\n[`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) is a basic composable that doesn't provide any styling or\npredefined slots for content. It is a relatively straightforward container that\nyou should populate with a container such as `Card`. The following are some of\nthe key parameters of a dialog:\n\n- **`onDismissRequest`**: The lambda called when the user closes the dialog.\n- **`properties`** : An instance of [`DialogProperties`](/reference/kotlin/androidx/compose/ui/window/DialogProperties) that provides some additional scope for customization.\n\n| **Caution:** Unlike the example of `AlertDialog` in the preceding section, you need to manually specify the size and shape of `Dialog`. You also need to provide an inner container.\n\nBasic example\n\nThe following example is a basic implementation of the `Dialog` composable. Note\nthat it uses a `Card` as the secondary container. Without the `Card`, the `Text`\ncomponent would appear alone above the main app content.\n\n\n```kotlin\n@Composable\nfun MinimalDialog(onDismissRequest: () -\u003e Unit) {\n Dialog(onDismissRequest = { onDismissRequest() }) {\n Card(\n modifier = Modifier\n .fillMaxWidth()\n .height(200.dp)\n .padding(16.dp),\n shape = RoundedCornerShape(16.dp),\n ) {\n Text(\n text = \"This is a minimal dialog\",\n modifier = Modifier\n .fillMaxSize()\n .wrapContentSize(Alignment.Center),\n textAlign = TextAlign.Center,\n )\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Dialog.kt#L141-L160\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as follows. Note that when the dialog is open, the\nmain app content beneath it appears darkened and grayed out:\n**Figure 3.** Minimal dialog.\n\nAdvanced example\n\nThe following is a more advanced implemented of the `Dialog` composable. In this\ncase, the component manually implements a similar interface to the `AlertDialog`\nexample above.\n| **Caution:** If you only need to display a two-button dialog as in this example, you should use `AlertDialog` and its more convenient API. However, if you want to create a more complex dialog, perhaps with forms and multiple buttons, you should use `Dialog` with custom content, as in the following example.\n\n\n```kotlin\n@Composable\nfun DialogWithImage(\n onDismissRequest: () -\u003e Unit,\n onConfirmation: () -\u003e Unit,\n painter: Painter,\n imageDescription: String,\n) {\n Dialog(onDismissRequest = { onDismissRequest() }) {\n // Draw a rectangle shape with rounded corners inside the dialog\n Card(\n modifier = Modifier\n .fillMaxWidth()\n .height(375.dp)\n .padding(16.dp),\n shape = RoundedCornerShape(16.dp),\n ) {\n Column(\n modifier = Modifier\n .fillMaxSize(),\n verticalArrangement = Arrangement.Center,\n horizontalAlignment = Alignment.CenterHorizontally,\n ) {\n Image(\n painter = painter,\n contentDescription = imageDescription,\n contentScale = ContentScale.Fit,\n modifier = Modifier\n .height(160.dp)\n )\n Text(\n text = \"This is a dialog with buttons and an image.\",\n modifier = Modifier.padding(16.dp),\n )\n Row(\n modifier = Modifier\n .fillMaxWidth(),\n horizontalArrangement = Arrangement.Center,\n ) {\n TextButton(\n onClick = { onDismissRequest() },\n modifier = Modifier.padding(8.dp),\n ) {\n Text(\"Dismiss\")\n }\n TextButton(\n onClick = { onConfirmation() },\n modifier = Modifier.padding(8.dp),\n ) {\n Text(\"Confirm\")\n }\n }\n }\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Dialog.kt#L164-L218\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as follows:\n**Figure 4.** A dialog that includes an image.\n\nAdditional resources\n\n- [Material UI docs](https://m3.material.io/components/dialogs/overview)"]]