به تمرکز واکنش نشان دهید

برای تجسم تمرکز راحت تر، نشانه های بصری ارائه دهید

در حالی که همه عناصر قابل فوکوس از تم مواد از قبل دارای سبک فوکوس منطبق با موضوع هستند، ممکن است لازم باشد برخی از عناصر بصری را اضافه کنید تا عنصر متمرکز شده را راحت‌تر شناسایی کنید. یک راه حل خوب این است که مرز عنصر خود را با رنگی تغییر دهید که کنتراست خوبی با پس زمینه دارد:

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

در این مثال، remember برای ذخیره رنگ حاشیه در میان ترکیب‌های مجدد استفاده می‌شود، و طرح کلی عنصر هر بار که عنصر فوکوس می‌کند یا از دست می‌دهد، به‌روزرسانی می‌شود.

نشانه های بصری پیشرفته را پیاده سازی کنید

با Jetpack Compose، می‌توانید نشانه‌های بصری پیچیده‌تر و پیشرفته‌تری ایجاد کنید که با رابط کاربری شما مطابقت بیشتری داشته باشد.

1. ابتدا یک IndicationInstance ایجاد کنید که به صورت بصری نشانه مورد نظر شما را در UI شما ترسیم کند:

   private class MyHighlightIndicationNode(private val interactionSource: InteractionSource) :
       Modifier.Node(), DrawModifierNode {
       private var isFocused = false
   
       override fun onAttach() {
           coroutineScope.launch {
               var focusCount = 0
               interactionSource.interactions.collect { interaction ->
                   when (interaction) {
                       is FocusInteraction.Focus -> focusCount++
                       is FocusInteraction.Unfocus -> focusCount--
                   }
                   val focused = focusCount > 0
                   if (isFocused != focused) {
                       isFocused = focused
                       invalidateDraw()
                   }
               }
           }
       }
   
       override fun ContentDrawScope.draw() {
           drawContent()
           if (isFocused) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. سپس یک Indication ایجاد کنید و حالت متمرکز را به خاطر بسپارید:

   object MyHighlightIndication : IndicationNodeFactory {
       override fun create(interactionSource: InteractionSource): DelegatableNode {
           return MyHighlightIndicationNode(interactionSource)
       }
   
       override fun hashCode(): Int = -1
   
       override fun equals(other: Any?) = other === this
   }
   FocusSnippets.kt

3. هر دو Indication و InteractionSource از طریق اصلاح کننده indication() به UI اضافه کنید:

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

وضعیت تمرکز را درک کنید

به طور کلی، هر بار که حالتی از فوکوس تغییر می‌کند، یک FocusEvent در درخت فعال می‌شود و والدین یک اصلاح‌کننده focusable() می‌توانند با استفاده از اصلاح‌کننده onFocusChanged() به آن گوش دهند.

اگر نیاز به دانستن وضعیت فوکوس دارید، می‌توانید از این APIها همراه با اصلاح‌کننده onFocusChanged استفاده کنید:

• اگر کامپوزیتی که اصلاح کننده به آن متصل است متمرکز باشد isFocused true را برمی گرداند
• hasFocus مشابه isFocused کار می کند، اما با یک تفاوت اساسی: به جای بررسی فقط جریان، بررسی می کند که آیا عنصر یا یکی از فرزندان آن متمرکز است یا خیر.
• isCaptured هر زمان که فوکوس حفظ شود، true برمی گرداند. این اتفاق می افتد، برای مثال، زمانی که یک TextField حاوی داده های نادرست است، به طوری که تلاش برای تمرکز عناصر دیگر، فوکوس را پاک نمی کند.

این فیلدها در زیر نشان داده شده است:

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