ডায়ালগ

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 composable

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

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

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

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