Jetpack Compose Glimmer-এ টগল বাটন

প্রযোজ্য এক্সআর ডিভাইস

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

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

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

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

অন্যান্য ব্যবহারের জন্য সাধারণ বাটন এবং আইকন বাটনও রয়েছে।

শারীরস্থান

একটি টগল বাটন একটি কন্টেইনার নিয়ে গঠিত যা বিভিন্ন অবস্থার মধ্যে রূপান্তরিত হয় এবং এতে ঐচ্ছিক আইকনসহ একটি লেবেল থাকে।

আকার

সাধারণ বাটনের মতোই, টগল বাটনও দুই ধরনের আকার সমর্থন করে:

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

ডিফল্টরূপে, টগল বাটনগুলো ToggleButtonDefaults.animateShape ব্যবহার করে। এটি নিম্নলিখিত অবস্থাগুলোর মধ্যে একটি মসৃণ রূপান্তর তৈরি করে:

• অপরীক্ষিত : GlimmerTheme.shapes.large (সাধারণত একটি CircleShape )।
• চেক করা : ToggleButtonDefaults.CheckedShape (একটি RoundedCornerShape যার কোণাগুলো 20.dp )।

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

• অনির্বাচিত : ডিফল্ট হিসেবে GlimmerTheme.colors.surface ব্যবহৃত হবে।
• নির্বাচিত : ডিফল্ট হিসেবে GlimmerTheme.colors.surface ব্যবহৃত হয়।

অ্যানিমেশন

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

• 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) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt