ফোকাস প্রতিক্রিয়া

সহজ ফোকাস ভিজ্যুয়ালাইজেশনের জন্য চাক্ষুষ সংকেত প্রদান করুন

যদিও মেটেরিয়াল থিমের সমস্ত ফোকাসযোগ্য উপাদানগুলির ইতিমধ্যেই একটি ফোকাস স্টাইল রয়েছে যা থিমের সাথে মেলে, আপনাকে ফোকাস করা উপাদানটিকে সহজে চিহ্নিত করতে কিছু ভিজ্যুয়াল উপাদান যুক্ত করতে হতে পারে৷ একটি ভাল সমাধান হল আপনার উপাদানের সীমানা এমন একটি রঙের সাথে পরিবর্তন করা যা ব্যাকগ্রাউন্ডের সাথে একটি ভাল বৈসাদৃশ্য রয়েছে:

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}
FocusSnippets.kt

এই উদাহরণে, recompositions জুড়ে সীমানার রঙ সংরক্ষণ করতে remember ব্যবহার করা হয়, এবং উপাদানটির রূপরেখা প্রতিবার আপডেট করা হয় যখন উপাদানটি ফোকাস লাভ করে বা হারায়।

উন্নত চাক্ষুষ সংকেত প্রয়োগ করুন

জেটপ্যাক কম্পোজের মাধ্যমে, আপনি আরও পরিশীলিত এবং উন্নত ভিজ্যুয়াল সংকেত তৈরি করতে পারেন যা আপনার UI এর সাথে আরও ভাল মেলে।

1. প্রথমে, একটি IndicationInstance তৈরি করুন যা দৃশ্যত আপনার UI-তে আপনার কাঙ্খিত কিউ আঁকে:

   private class MyHighlightIndicationInstance(isEnabledState: State<Boolean>) :
       IndicationInstance {
       private val isEnabled by isEnabledState
       override fun ContentDrawScope.drawIndication() {
           drawContent()
           if (isEnabled) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. এরপরে, একটি Indication তৈরি করুন এবং ফোকাসড অবস্থা মনে রাখুন:

   class MyHighlightIndication : Indication {
       @Composable
       override fun rememberUpdatedInstance(interactionSource: InteractionSource):
           IndicationInstance {
           val isFocusedState = interactionSource.collectIsFocusedAsState()
           return remember(interactionSource) {
               MyHighlightIndicationInstance(isEnabledState = isFocusedState)
           }
       }
   }
   FocusSnippets.kt

3. indication() সংশোধকের মাধ্যমে UI-তে Indication এবং একটি InteractionSource উভয়ই যোগ করুন:

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   FocusSnippets.kt

ফোকাসের অবস্থা বুঝুন

সাধারণত, যখনই ফোকাসের অবস্থা পরিবর্তিত হয়, একটি FocusEvent গাছ থেকে উড়িয়ে দেওয়া হয় এবং একটি focusable() মডিফায়ারের পিতামাতারা onFocusChanged() মডিফায়ার ব্যবহার করে এটি শুনতে পারেন।

আপনার যদি ফোকাসের অবস্থা জানতে হয়, তাহলে আপনি onFocusChanged সংশোধকের সাথে এই APIগুলি ব্যবহার করতে পারেন:

• যদি সংশোধকটির সাথে সংশোধকটি সংযুক্ত থাকে তা ফোকাস করা হলে isFocused true দেখায়
• hasFocus isFocused এর মতো একইভাবে কাজ করে, কিন্তু একটি উল্লেখযোগ্য পার্থক্যের সাথে: শুধুমাত্র বর্তমান পরীক্ষা করার পরিবর্তে, এটি উপাদান বা তার সন্তানদের মধ্যে একটি ফোকাস করা হয়েছে কিনা তা পরীক্ষা করে
• যখনই ফোকাস রাখা হয় তখনই isCaptured করা true হয়। এটি ঘটে, উদাহরণস্বরূপ, যখন একটি TextField ভুল ডেটা থাকে, যাতে অন্য উপাদানগুলিকে ফোকাস করার চেষ্টা করা ফোকাসটি পরিষ্কার করে না।

এই ক্ষেত্রগুলি নীচে দেখানো হয়েছে:

Modifier.onFocusChanged {
    val isFocused = it.isFocused
    val hasFocus = it.hasFocus
    val isCaptured= it.isCaptured
}