ডায়ালগ

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

এই প্রয়োগটি নিম্নলিখিতভাবে দেখানো হয়:

একটি ডায়ালগ যেখানে মাউন্ট ফেদারটপ, ভিক্টোরিয়া দেখানো হয়েছে, সাথে আছে বাতিল করার বোতাম ও কনফার্ম করার বোতাম।
ছবি ৪. একটি ডায়ালগ যাতে ছবি অন্তর্ভুক্ত আছে।

অতিরিক্ত রিসোর্স