هدف‌های کانونی کردن گروه

بااستفاده از اصلاح‌گر focusGroup می‌توانید چندین هدف کانونی را با هم گروه‌بندی کنید. گروه‌بندی به شما امکان می‌دهد سلسله‌مراتب فوکوس را مدیریت کنید، مناطق منطقی رابط کاربری (مثل نوارابزارها، کنش‌های چارگوش گفتگو، یا فهرست کارت‌ها) را مجزا کنید، و وقتی فوکوس وارد منطقه‌ای می‌شود یا از آن خارج می‌شود، آن را رهگیری کنید.

مفاهیم گروه کانونی: ورود، خروج، و پیمایش پیش‌فرض

گروه کانونی مرز پیمایش منسجمی را در اطراف هدف‌های کانونی فرزندش ایجاد می‌کند. درک نحوه حرکت تمرکز در این مرز به دو مفهوم کلیدی بستگی دارد:

  • ورود: رویدادی که وقتی تمرکز از هر عنصری خارج از گروه تمرکز به عنصری داخل گروه منتقل می‌شود رخ می‌دهد.
  • خروج: رویدادی که وقتی تمرکز از آخرین عنصر داخلی گروه خارج می‌شود و به هدف تمرکز خارجی منتقل می‌شود رخ می‌دهد.
نموداری که گذارهای «ورود» و «خروج» را در سراسر مرز گروه کانونی نشان می‌دهد.
شکل ۱. گروه کانونی با رویدادهای ورود و خروج.

رفتار پیمایش تمرکز پیش‌فرض

به‌طور پیش‌فرض، وقتی گروه کانونی از بیرون فوکوس دریافت می‌کند:

  1. ورود به گروه: «نوشتن» به‌طور خودکار هدف کانونی داخلی کودک را انتخاب می‌کند. برای پیمایش یک‌بعدی (Tab)، اولین فرزند را به ترتیب ظاهر بصری انتخاب می‌کند. برای پیمایش دو بعدی (کلید جهت‌نما یا پد کنترل)، فرزندی را انتخاب می‌کند که از نظر هندسی به جهت ورودی نزدیک‌تر باشد.
  2. پیمایش در گروه: فشارهای مکرر کلید پیمایش تمرکز را بین هدف‌های تمرکز هم‌نیا که در گروه محصور شده‌اند جابه‌جا می‌کند.
  3. خروج از گروه: وقتی کاربر از آخرین هدف تمرکز داخل گروه پیمایش کرد، با فشار دادن کلید بعدی از گروه خارج می‌شود و تمرکز به هدف تمرکز همسایه در خارج از گروه منتقل می‌شود.

سفارشی‌سازی کردن هدایت مجدد ورودی تمرکز

در بسیاری از طراحی‌های میانای کاربری، هدف ورودی پیش‌فرض (مثل اولین فرزند در ترتیب ظاهر) منطقی‌ترین یا راحت‌ترین انتخاب برای کاربر نیست.

هدف و موارد استفاده

کادر گفتگوی تأییدی را درنظر بگیرید که دکمه «لغو» در سمت راست و دکمه اصلی «تأیید» در سمت چپ دارد. وقتی کاربر از فیلد فرم به نوار دکمه پیمایش می‌کند:

  • عملکرد پیش‌فرض: تمرکز روی «لغو» قرار می‌گیرد زیرا اولین دکمه در ترتیب ظاهر بصری است.
  • عملکرد موردنظر: ازآنجایی‌که «تأیید» کنش اصلی توصیه‌شده است، وقتی از بخش‌های قبلی در ترتیب تمرکز وارد گروه دکمه می‌شوید، می‌خواهید تمرکز مستقیماً روی «تأیید» قرار بگیرد، درعین‌حال کاربر همچنان بتواند درصورت نیاز با فشار دادن چپ «لغو» را انتخاب کند.
ورودی تمرکز پیش‌فرض در گروه دکمه.
شکل ۲. دکمه‌های لغو و تأیید با هدف ورودی تمرکز پیش‌فرض.

موارد استفاده رایج دیگر عبارت‌اند از:

  • هنگام وارد کردن TabRow، تمرکز مستقیماً به زبانه انتخاب‌شده کنونی منتقل می‌شود.
  • هنگام ورود به نوار بازپخش رسانه، تمرکز مستقیماً به کنترل «پخش / مکث» منتقل می‌شود.

پیاده‌سازی با onEnter و FocusRequester

برای هدایت کردن تمرکز پس‌از ورود به گروه کانونی:

  1. اصلاح‌گر focusGroup را روی محتوی والد پوشاننده هدف‌های کانونی مرتبط اعمال کنید.
  2. focusPropertiesاصلاح‌کننده را روی محتوی اعمال کنید، و کارگزاری onEnter را پیکربندی کنید.
  3. در onEnter بازخوانی (محدوده FocusEnterExitScope)، بااستفاده از focusRequester، requestFocus() را در FocusRequester منسوب به فرزند پیش‌فرض ترجیحی فراخوانی کنید.

val defaultChildRequester = remember { FocusRequester() }

Row(
    modifier = Modifier
        .focusGroup()
        .focusProperties {
            // Intercept entry into this group and redirect focus to the primary action
            onEnter = {
                defaultChildRequester.requestFocus()
            }
        }
) {
    Button(onClick = { /* Cancel action */ }) {
        Text("Cancel")
    }
    Button(
        onClick = { /* Confirm action */ },
        modifier = Modifier.focusRequester(defaultChildRequester)
    ) {
        Text("Confirm (Default)")
    }
}

در onEnter و onExit، همچنین می‌توانید cancelFocusChange() را فراخوانی کنید تا گذار کانونی را در سراسر مرز به‌طور کامل مسدود کنید، یا requestedFocusDirection را بازرسی کنید تا مسیریابی را براساس اینکه کاربر بااستفاده از کلید جهش، کلید پایین، یا کلید چپ پیمایش کرده است یا نه سفارشی‌سازی کنید.

ظرف‌های پیمایش‌شدنی به‌طور پیش‌فرض گروه‌های کانونی هستند

در Jetpack Compose، محتویات پیمایش‌پذیر مثل LazyRow، LazyColumn، و LazyVerticalGrid به‌طور خودکار به‌عنوان گروه‌های کانونی عمل می‌کنند. برای تنظیم onEnter یا onExit پادکارها، نیازی نیست توصیف‌گر focusGroup را به‌طور صریح روی آن‌ها اعمال کنید.