ফোকাস স্টেট নির্দেশ করা

ফোকাসড স্টেট, কোন UI এলিমেন্ট বর্তমানে ইনপুট ফোকাস হোল্ড করে আছে তা ব্যবহারকারীদের বুঝতে সাহায্য করার জন্য একটি স্পষ্ট ভিজ্যুয়াল ইঙ্গিত প্রদান করে। সব ইন্ট্যার‍্যাক্টিভ Material 3 কম্পোনেন্ট ডিফল্ট হিসেবে বিল্ট-ইন ফোকাস ইন্ডিকেশন প্রদান করে।

Material থিমের ফোকাস ইঙ্গিত

ভিজ্যুয়াল স্টেট পরিবর্তন আঁকতে মেটেরিয়াল কম্পোনেন্ট ripple ফাংশন ও LocalIndication ব্যবহার করে। কাস্টম কম্পোনেন্টে স্ট্যান্ডার্ড মেটেরিয়াল ফোকাস ফিডব্যাক অ্যাটাচ করতে:

1. remember { MutableInteractionSource() } ব্যবহার করে MutableInteractionSource তৈরি করুন।
2. indication মডিফায়ারে ইন্ট্যার‍্যাকশন সোর্স পাস করুন, সাথে ripple()।

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

কাস্টম ফোকাস ইন্ডিকেশন প্রয়োগ করা

কাস্টম ভিজ্যুয়াল কিউয়ের জন্য (যেমন, স্কেলিং, বর্ডার বা গ্লোয়িং এফেক্ট):

1. IndicationNodeFactory তৈরি করুন।
2. এলিমেন্টের InteractionSource থেকে নির্গত ফোকাস ইন্টার‍্যাকশন পর্যবেক্ষণ করুন।
3. indication মডিফায়ার ব্যবহার করে কাস্টম ইঙ্গিত প্রয়োগ করুন।

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt