চেকবক্স

চেকবক্স ব্যবহারকারীদের একটি তালিকা থেকে এক বা একাধিক আইটেম নির্বাচন করতে দেয়। আপনি ব্যবহারকারীকে নিম্নলিখিত কাজগুলো করার সুযোগ দিতে একটি চেকবক্স ব্যবহার করতে পারেন:

• কোনো একটি আইটেম চালু বা বন্ধ করুন।
• একটি তালিকা থেকে একাধিক বিকল্প থেকে নির্বাচন করুন।
• সম্মতি বা স্বীকৃতি জানান।

শারীরস্থান

একটি চেকবক্স নিম্নলিখিত উপাদানগুলো নিয়ে গঠিত:

• বক্স : এটি চেকবক্সের ধারক।
• চেক : এটি একটি দৃশ্যমান নির্দেশক যা দেখায় যে চেকবক্সটি নির্বাচিত হয়েছে কি না।
• লেবেল : এটি সেই লেখা যা চেকবক্সটির বর্ণনা দেয়।

রাজ্যগুলি

একটি চেকবক্স তিনটি অবস্থার যেকোনো একটিতে থাকতে পারে:

• অনির্বাচিত : চেকবক্সটি নির্বাচিত নয়। বক্সটি খালি।
• অনির্ধারিত : চেকবক্সটি একটি অনির্ধারিত অবস্থায় আছে। বক্সটিতে একটি ড্যাশ রয়েছে।
• নির্বাচিত : চেকবক্সটি নির্বাচিত। বক্সটিতে একটি টিক চিহ্ন রয়েছে।

নিচের চিত্রটিতে একটি চেকবক্সের তিনটি অবস্থা দেখানো হয়েছে।

বাস্তবায়ন

আপনি আপনার অ্যাপে একটি চেকবক্স তৈরি করতে Checkbox কম্পোজেবল ব্যবহার করতে পারেন। এক্ষেত্রে কয়েকটি গুরুত্বপূর্ণ প্যারামিটার মনে রাখতে হবে:

• checked : এই বুলিয়ান কোডটি নির্দেশ করে যে চেকবক্সটি চেক করা আছে নাকি আনচেক করা আছে।
• onCheckedChange() : ব্যবহারকারী যখন চেকবক্সে ট্যাপ করেন, তখন অ্যাপটি এই ফাংশনটি কল করে।

নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে Checkbox কম্পোজেবল ব্যবহার করতে হয়:

@Composable
fun CheckboxMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            "Minimal checkbox"
        )
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }

    Text(
        if (checked) "Checkbox is checked" else "Checkbox is unchecked"
    )
}
Checkbox.kt

ব্যাখ্যা

এই কোডটি একটি চেকবক্স তৈরি করে যা প্রাথমিকভাবে আনচেক করা থাকে। যখন ব্যবহারকারী চেকবক্সটিতে ক্লিক করেন, তখন onCheckedChange ল্যাম্বডাটি checked অবস্থাটি আপডেট করে।

ফলাফল

এই উদাহরণটি আনচেক করা হলে নিম্নলিখিত কম্পোনেন্টটি তৈরি করে:

এবং চেক করা হলে একই চেকবক্সটি দেখতে এইরকম হয়:

উন্নত উদাহরণ

আপনার অ্যাপে কীভাবে চেকবক্স প্রয়োগ করতে পারেন, তার একটি আরও জটিল উদাহরণ নিচে দেওয়া হলো। এই কোড অংশে একটি মূল চেকবক্স এবং তার একাধিক চাইল্ড চেকবক্স রয়েছে। যখন ব্যবহারকারী মূল চেকবক্সটিতে ট্যাপ করেন, তখন অ্যাপটি সবগুলো চাইল্ড চেকবক্স চেক করে দেয়।

@Composable
fun CheckboxParentExample() {
    // Initialize states for the child checkboxes
    val childCheckedStates = remember { mutableStateListOf(false, false, false) }

    // Compute the parent state based on children's states
    val parentState = when {
        childCheckedStates.all { it } -> ToggleableState.On
        childCheckedStates.none { it } -> ToggleableState.Off
        else -> ToggleableState.Indeterminate
    }

    Column {
        // Parent TriStateCheckbox
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text("Select all")
            TriStateCheckbox(
                state = parentState,
                onClick = {
                    // Determine new state based on current state
                    val newState = parentState != ToggleableState.On
                    childCheckedStates.forEachIndexed { index, _ ->
                        childCheckedStates[index] = newState
                    }
                }
            )
        }

        // Child Checkboxes
        childCheckedStates.forEachIndexed { index, checked ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text("Option ${index + 1}")
                Checkbox(
                    checked = checked,
                    onCheckedChange = { isChecked ->
                        // Update the individual child state
                        childCheckedStates[index] = isChecked
                    }
                )
            }
        }
    }

    if (childCheckedStates.all { it }) {
        Text("All options selected")
    }
}
Checkbox.kt

ব্যাখ্যা

এই উদাহরণ থেকে আপনার কয়েকটি বিষয় লক্ষ্য করা উচিত:

• রাষ্ট্রীয় ব্যবস্থাপনা :
  • childCheckedStates : প্রতিটি চাইল্ড চেকবক্সের চেক্ট অবস্থা ট্র্যাক করার জন্য mutableStateOf() ব্যবহার করে তৈরি বুলিয়ানের একটি তালিকা।
  • parentState : একটি ToggleableState যার মান তার অধীনস্থ চেকবক্সগুলোর অবস্থা থেকে নির্ধারিত হয়।
• UI উপাদানসমূহ :
  • TriStateCheckbox : প্যারেন্ট চেকবক্সের জন্য এটি প্রয়োজনীয়, কারণ এর একটি state প্যারামিটার আছে যা দিয়ে এটিকে অনির্দিষ্ট (indeterminate) হিসেবে সেট করা যায়।
  • Checkbox : প্রতিটি চাইল্ড চেকবক্সের জন্য ব্যবহৃত হয়, যার স্টেট childCheckedStates এর সংশ্লিষ্ট এলিমেন্টের সাথে লিঙ্ক করা থাকে।
  • Text : লেবেল এবং বার্তা প্রদর্শন করে ("সব নির্বাচন করুন", "বিকল্প X", "সব বিকল্প নির্বাচিত হয়েছে")।
• যুক্তি :
  • প্যারেন্ট চেকবক্সের onClick সমস্ত চাইল্ড চেকবক্সকে বর্তমান প্যারেন্ট অবস্থার বিপরীত অবস্থায় আপডেট করে।
  • প্রতিটি চাইল্ড চেকবক্সের onCheckedChange childCheckedStates লিস্টে তার সংশ্লিষ্ট স্টেট আপডেট করে।
  • যখন সমস্ত চাইল্ড চেকবক্স চেক করা থাকে, তখন কোডটি " All options selected " প্রদর্শন করে।

ফলাফল

এই উদাহরণটি সব চেকবক্স আনচেক করা থাকলে নিম্নলিখিত কম্পোনেন্টটি তৈরি করে।

একইভাবে, যখন সমস্ত অপশন চেক করা থাকে, অর্থাৎ ব্যবহারকারী 'সব নির্বাচন করুন' (select all) ট্যাপ করলে, কম্পোনেন্টটি দেখতে এইরকম হয়:

যখন কেবল একটি বিকল্প চেক করা হয়, তখন মূল চেকবক্সটি অনির্দিষ্ট অবস্থা প্রদর্শন করে:

অতিরিক্ত সম্পদ

• উপাদান ডিজাইন চেকবক্স