সুইচ

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

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

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

হালকা এবং অন্ধকার উভয় মোডে স্যুইচ উপাদানের উদাহরণ।
চিত্র 1. সুইচ উপাদান.

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

একটি সম্পূর্ণ API সংজ্ঞার জন্য Switch রেফারেন্স দেখুন। নিম্নলিখিত কিছু মূল পরামিতিগুলি আপনাকে ব্যবহার করতে হতে পারে:

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

নিম্নলিখিত উদাহরণ হল Switch কম্পোজেবলের একটি ন্যূনতম বাস্তবায়ন। 

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

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

টিক চিহ্ন মুক্ত করা হলে এই বাস্তবায়নটি নিম্নরূপ প্রদর্শিত হয়:

একটি মৌলিক সুইচ যা আনচেক করা আছে।
চিত্র 2. একটি আনচেক সুইচ।

এটি চেক করার সময় চেহারা:

একটি মৌলিক সুইচ যা চেক করা হয়।
চিত্র 3. একটি চেক করা সুইচ।

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

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

  • 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

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

একটি সুইচ যা চেক করা হলে একটি কাস্টম আইকন প্রদর্শন করতে থাম্বকন্টেন্ট প্যারামিটার ব্যবহার করে।
চিত্র 4. একটি কাস্টম চেক করা আইকন সহ একটি সুইচ৷

কাস্টম রং

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

@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

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

একটি সুইচ যা কালার প্যারামিটার ব্যবহার করে থাম্ব এবং ট্যাক উভয়ের জন্য কাস্টম রঙ সহ একটি সুইচ প্রদর্শন করে।
চিত্র 5. কাস্টম রং সহ একটি সুইচ।

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