চেকবক্স

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

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

অ্যানাটমি

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

  • বাক্স : এটি চেকবক্সের জন্য ধারক।
  • চেক করুন : এটি একটি ভিজ্যুয়াল সূচক যা দেখায় যে চেকবক্সটি নির্বাচন করা হয়েছে কিনা।
  • লেবেল : এটি সেই পাঠ্য যা চেকবক্সের বর্ণনা দেয়।

রাজ্যগুলি

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

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

নিচের ছবিটি একটি চেকবক্সের তিনটি অবস্থা প্রদর্শন করে।

প্রতিটি তিনটি অবস্থায় একটি চেকবক্স উপাদানের একটি উদাহরণ: অনির্বাচিত, নির্বাচিত, এবং অনির্ধারিত।
চিত্র 1. একটি চেকবক্সের তিনটি অবস্থা। অনির্বাচিত, অনির্ধারিত এবং নির্বাচিত।

বাস্তবায়ন

আপনি আপনার অ্যাপে একটি চেকবক্স তৈরি করতে 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 lambda checked অবস্থা আপডেট করে।

ফলাফল

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

একটি লেবেল সহ একটি আনচেক করা চেকবক্স৷ এর নিচে লেখা আছে 'চেকবক্স আনচেক করা হয়েছে'
চিত্র 2. টিক চিহ্নমুক্ত চেকবক্স

এবং এইভাবে চেক করা হলে একই চেকবক্স প্রদর্শিত হয়:

একটি লেবেল সহ একটি চেক করা চেকবক্স৷ এর নিচে লেখা আছে 'চেকবক্স চেক করা হয়েছে'
চিত্র 3. চেকবক্স চেক করা হয়েছে

উন্নত উদাহরণ

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

@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 প্যারাম রয়েছে যা আপনাকে এটিকে অনির্ধারিত হিসাবে সেট করতে দেয়।
    • Checkbox : প্রতিটি চাইল্ড চেকবক্সের জন্য ব্যবহার করা হয় যার স্টেট childCheckedStates সংশ্লিষ্ট উপাদানের সাথে সংযুক্ত থাকে।
    • Text : লেবেল এবং বার্তাগুলি প্রদর্শন করে ("সমস্ত নির্বাচন করুন", "বিকল্প X", "সমস্ত বিকল্প নির্বাচিত")।
  • যুক্তি :
    • অভিভাবক চেকবক্সের onClick বর্তমান অভিভাবক অবস্থার বিপরীতে সমস্ত চাইল্ড চেকবক্স আপডেট করে।
    • প্রতিটি শিশুর চেকবক্সের onCheckedChange childCheckedStates তালিকায় তার সংশ্লিষ্ট অবস্থা আপডেট করে।
    • যখন সমস্ত চাইল্ড চেকবক্স চেক করা হয় তখন কোডটি " All options selected " প্রদর্শন করে।

ফলাফল

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

একটি লেবেল সহ অচেক করা লেবেলযুক্ত চেকবক্সগুলির একটি সিরিজ৷
চিত্র 4. টিক চিহ্নমুক্ত চেকবক্স

একইভাবে, যখন সমস্ত বিকল্পগুলি চেক করা হয় তখন এইভাবে উপাদানটি উপস্থিত হয়, যেমন ব্যবহারকারী ট্যাপ করে সমস্ত নির্বাচন করুন:

একটি লেবেল সহ চেক করা লেবেলযুক্ত চেকবক্স চেকবক্সের একটি সিরিজ। প্রথমটি 'সব নির্বাচন করুন' চিহ্নিত করা হয়েছে। তাদের নীচে একটি টেক্সট উপাদান আছে যেটি পড়ে 'সব বিকল্প নির্বাচিত'।
চিত্র 5. চেক করা চেকবক্স

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

একটি লেবেল সহ চেকবক্সের চেকবক্স চেকবক্সের একটি সিরিজ। একটি ছাড়া সবগুলোই আনচেক করা আছে। 'সব নির্বাচন করুন' লেবেলযুক্ত চেকবক্সটি অনির্দিষ্ট, একটি ড্যাশ প্রদর্শন করছে।
চিত্র 6. অনির্ধারিত চেকবক্স

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