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

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

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

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 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 و InteractionSource از طریق اصلاح کننده indication() به UI اضافه کنید:

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   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
}