Jetpack Compose Glimmer-এ টগল বোতাম

প্রযোজ্য XR ডিভাইস

এইসব XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে এই নির্দেশিকা আপনাকে সাহায্য করে।

XR ডিভাইসের ধরন সম্পর্কে জানুন →

XR ডিভাইসের ধরন সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, ToggleButton হল একটি ইন্ট্যার‍্যাক্টিভ কম্পোনেন্ট যা চেক করা স্টেটের উপর ভিত্তি করে নিজের চেহারা পরিবর্তন করে। টগল বোতামগুলি ডিসপ্লে গ্লাসের জন্য অপ্টিমাইজ করা হয় যাতে আকার ও রঙের ক্ষেত্রে স্পষ্ট ভিজ্যুয়াল ট্রানজিশন প্রদান করা যায়। এইসব ট্রানজিশন থেকে বোঝা যায় যে কোনও অ্যাকশন বা সেটিং অ্যাক্টিভ আছে।

চালু বা বন্ধ করা যায় এমন অ্যাকশন দেখাতে টগল বোতাম ব্যবহার করুন। শুধুমাত্র আইকন সহ টগলের বিপরীতে, টগল বোতাম মূলত টেক্সট কন্টেন্ট দেখায়, যদিও এটি অতিরিক্ত প্রসঙ্গ যোগ করার জন্য ঐচ্ছিক আইকন স্লট সাপোর্ট করে।

অন্যান্য ব্যবহারের ক্ষেত্রে, স্ট্যান্ডার্ড বোতাম এবং আইকন বোতামও আছে।

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

টগল বোতামে একটি কন্টেনার থাকে যা বিভিন্ন স্টেটের মধ্যে পরিবর্তিত হয় এবং একটি লেবেল বিকল্প আইকন সহ থাকে।

মাপগুলি

স্ট্যান্ডার্ড বোতামের মতো, টগল বোতামে দুটি সাইজ ভেরিয়েন্ট কাজ করে:

টগল বোতামের ডিফল্ট

ডিফল্ট হিসেবে, টগল বোতাম ToggleButtonDefaults.animateShape ব্যবহার করে। এর ফলে নিম্নলিখিত স্টেটগুলির মধ্যে সাবলীল ট্রানজিশন তৈরি হয়:

• টিকচিহ্ন দেওয়া নেই: GlimmerTheme.shapes.large (সাধারণত a CircleShape)।
• টিক চিহ্ন দেওয়া হয়েছে: ToggleButtonDefaults.CheckedShape (ক RoundedCornerShape-এর 20.dp কোণ)।

ToggleButtonColors ক্লাস নিম্নলিখিত স্টেটের জন্য কালার রেজোলিউশন ম্যানেজ করে:

• টিকচিহ্ন দেওয়া নেই: ডিফল্ট হিসেবে GlimmerTheme.colors.surface সেট করা থাকে।
• চেক করা আছে: ডিফল্ট হিসেবে GlimmerTheme.colors.surface সেট করা থাকে।

Animation

টগল বোতাম অ্যানিমেশনের জন্য নিম্নলিখিত ডিফল্ট ব্যবহার করে:

• animateShape: একটি Shape প্রদান করে যা স্প্রিং অ্যানিমেশন স্পেক (stiffness = 600f) ব্যবহার করে কোণগুলির সাইজ ইন্টারপোলেট করে।
• colors: উভয় স্টেটের জন্য ব্যাকগ্রাউন্ড ও কন্টেন্টের রঙ কাস্টমাইজ করতে একটি ফ্যাক্টরি ফাংশন।
• CheckedShape: চেক করা অবস্থার জন্য ব্যবহৃত একটি স্ট্যাটিক RoundedCornerShape(20.dp)।
• contentPadding: ButtonDefaults.contentPadding থেকে ইনহেরিট করে।

উদাহরণ: টগল বোতাম

নিচের কোডটি একটি প্রাথমিক টগল বোতাম তৈরি করে:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"

    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it }
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt

উদাহরণ: লিডিং আইকন সহ টগল বোতাম

নিম্নলিখিত কোডটি একটি লিডিং আইকন সহ টগল বোতাম তৈরি করে:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt