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

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

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

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

• Enter: رویدادی که وقتی تمرکز از هر عنصری خارج از گروه تمرکز به عنصری داخل گروه منتقل می‌شود، رخ می‌دهد.
• خروج: رویدادی که وقتی تمرکز آخرین عنصر داخلی گروه را ترک می‌کند و به هدف تمرکز خارجی منتقل می‌شود، رخ می‌دهد.

شکل ۱. گروه کانونی با رویدادهای ورود و خروج.

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

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

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

سفارشی‌سازی تغییر مسیر ورودی تمرکز

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

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

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

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

شکل ۲. دکمه‌های لغو و تأیید با هدف ورودی تمرکز پیش‌فرض.

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

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

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

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

1. اصلاح‌کننده focusGroup را روی محفظه والد که هدف‌های فوکوس مرتبط را دربرمی‌گیرد اعمال کنید.
2. focusPropertiesاصلاح‌کننده را روی ظرف اعمال کنید، و onEnter callback را پیکربندی کنید.
3. در فراخوانی برگشتی onEnter (محدود به FocusEnterExitScope)، requestFocus() را در FocusRequester مرتبط با فرزند پیش‌فرض ترجیحی بااستفاده از 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)")
    }
}
FocusGroup.kt

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

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

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