Dialog কম্পোনেন্ট ডায়ালগ মেসেজ দেখায় অথবা মূল অ্যাপ কন্টেন্টের উপরে
একটি লেয়ারে ব্যবহারকারীর ইনপুট চায়। ব্যবহারকারীর মনোযোগ আকর্ষণ করার জন্য এটি একটি বিঘ্নকারী UI অভিজ্ঞতা তৈরি করে।
ডায়ালগের ব্যবহারের ক্ষেত্রে নিম্নলিখিত বিষয়গুলি অন্তর্ভুক্ত:
- ব্যবহারকারীর অ্যাকশন কনফার্ম করা, যেমন কোনও ফাইল মুছে ফেলার সময়।
- ব্যবহারকারীর ইনপুট চাওয়া, যেমন টু-ডু লিস্ট অ্যাপে।
- ব্যবহারকারীর বেছে নেওয়ার জন্য বিকল্পের তালিকা দেখানো, যেমন প্রোফাইল সেট-আপে দেশ বেছে নেওয়া।
সতর্কতা ডায়ালগ
AlertDialog কম্পোজেবল, মেটেরিয়াল ডিজাইন থিমযুক্ত ডায়ালগ তৈরি করার জন্য
একটি সুবিধাজনক API প্রদান করে। ডায়ালগের নির্দিষ্ট এলিমেন্ট ম্যানেজ করার জন্য
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") } } } } } }
এই প্রয়োগটি নিম্নলিখিতভাবে দেখানো হয়: