সুইচ

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

• একটি সেটিং চালু বা বন্ধ করুন।
• একটি বৈশিষ্ট্য সক্রিয় বা নিষ্ক্রিয় করুন।
• একটি বিকল্প নির্বাচন করুন।

কম্পোনেন্টটির দুটি অংশ রয়েছে: থাম্ব এবং ট্র্যাক। থাম্ব হলো সুইচের ড্র্যাগযোগ্য অংশ এবং ট্র্যাকটি হলো এর ব্যাকগ্রাউন্ড। ব্যবহারকারী সুইচের অবস্থা পরিবর্তন করার জন্য থাম্বটিকে বামে বা ডানে ড্র্যাগ করতে পারেন। এছাড়াও, সুইচটি পরীক্ষা করতে এবং এর অবস্থা বাতিল করতে তারা সেটিতে ট্যাপ করতে পারেন।

মৌলিক বাস্তবায়ন

সম্পূর্ণ এপিআই সংজ্ঞার জন্য Switch রেফারেন্স দেখুন। নিচে কয়েকটি মূল প্যারামিটার দেওয়া হলো যা আপনার ব্যবহার করার প্রয়োজন হতে পারে:

• checked : সুইচটির প্রাথমিক অবস্থা।
• onCheckedChange : একটি কলব্যাক যা সুইচের অবস্থা পরিবর্তিত হলে কল করা হয়।
• enabled : সুইচটি চালু আছে নাকি বন্ধ আছে।
• colors : সুইচের জন্য ব্যবহৃত রংগুলো।

নিম্নলিখিত উদাহরণটি Switch composable-এর একটি ন্যূনতম বাস্তবায়ন।

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

আনচেক করা থাকলে এই বাস্তবায়নটি নিম্নরূপ দেখায়:

যাচাই করার পর চেহারাটি এইরকম:

উন্নত বাস্তবায়ন

আরও উন্নত সুইচ প্রয়োগ করার সময় আপনি যে প্রাথমিক প্যারামিটারগুলো ব্যবহার করতে চাইতে পারেন, সেগুলো হলো নিম্নরূপ:

• thumbContent : চেক করা অবস্থায় থাম্বের চেহারা কাস্টমাইজ করতে এটি ব্যবহার করুন।
• colors : ট্র্যাক ও থাম্বের রং নিজের পছন্দমতো ঠিক করতে এটি ব্যবহার করুন।

কাস্টম থাম্ব

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

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

এই বাস্তবায়নে, আনচেকড অবস্থাটি পূর্ববর্তী বিভাগের উদাহরণের মতোই। তবে, চেক করা হলে, এই বাস্তবায়নটি নিম্নরূপ দেখায়:

কাস্টম রঙ

নিম্নলিখিত উদাহরণটি দেখায় যে, সুইচটি চেক করা আছে কি না তা বিবেচনায় রেখে, আপনি কীভাবে colors প্যারামিটার ব্যবহার করে একটি সুইচের থাম্ব এবং ট্র্যাকের রঙ পরিবর্তন করতে পারেন।

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

এই বাস্তবায়নটি নিম্নরূপ:

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

• ম্যাটেরিয়াল UI ডক্স