اهداف تمرکز گروهی

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

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

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

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

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

رفتار پیش‌فرض پیمایش فوکوس

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

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

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

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

موارد قصد و کاربرد

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

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

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

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

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

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

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

1. اصلاح‌کننده focusGroup را به کانتینر والد که اهداف فوکوس مرتبط را در بر می‌گیرد، اعمال کنید.
2. اصلاح‌کننده focusProperties را به کانتینر اعمال کنید و فراخوانی onEnter را پیکربندی کنید.
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 ، Down یا Left پیمایش کرده است، سفارشی کنید.

کانتینرهای قابل اسکرول به طور پیش‌فرض گروه‌های کانونی هستند.

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

{% کلمه به کلمه %} {% فعل کمکی %}