চেকবক্স

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

• কোনও আইটেম চালু বা বন্ধ করুন।
• তালিকা থেকে একাধিক বিকল্প বেছে নিন।
• সম্মতি বা গ্রহণ করার বিষয়টি জানান।

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

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

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

রাজ্য

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

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

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

প্রয়োগ

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

ফলাফল

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

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

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

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

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