চেকবক্স

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

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

অঙ্গব্যবচ্ছেদ - বিদ্যা

চেকবক্সে নিম্নলিখিত উপাদানগুলি থাকে:

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

রাজ্য

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

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

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

প্রয়োগ

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

ফলাফল

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

একইভাবে, সব বিকল্প চেক করা হলে কম্পোনেন্টটি এইভাবে দেখা যায়, যেমন ব্যবহারকারী 'সব বেছে নিন' বিকল্পে ট্যাপ করলে:

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

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

• মেটেরিয়াল ডিজাইন চেকবক্স