Целевые показатели фокусировки группы

С помощью модификатора focusGroup можно сгруппировать несколько целевых областей фокусировки. Группировка позволяет управлять иерархией фокусировки, изолировать логические области пользовательского интерфейса (такие как панели инструментов, действия диалоговых окон или списки карточек) и перехватывать события входа или выхода фокуса из области.

Концепции фокус-группы: вход, выход и обход по умолчанию.

Фокус-группа устанавливает единую границу навигации вокруг своих дочерних целевых объектов. Понимание того, как фокус перемещается через эту границу, основано на двух ключевых понятиях:

• Enter : Событие, которое происходит при переходе фокуса с любого элемента вне группы элементов на элемент внутри группы.
• Выход : Событие, которое происходит, когда фокус внимания покидает последний внутренний элемент группы и переключается на внешний целевой объект.

Рисунок 1. Фокус-группа с событиями входа и выхода.

Поведение перемещения фокуса по умолчанию

По умолчанию, когда фокус-группа получает внимание извне:

1. При входе в группу : Compose автоматически выбирает внутренний целевой объект фокусировки для дочернего элемента. Для одномерной навигации ( Tab ) выбирается первый дочерний элемент в порядке его визуального появления. Для двухмерной навигации (клавиши со стрелками или D-pad) выбирается дочерний элемент, геометрически наиболее близкий к направлению входящего потока.
2. Навигация внутри группы : Повторные нажатия клавиш навигации перемещают фокус между соседними объектами, находящимися внутри группы.
3. Выход из группы : Как только пользователь минует последний объект фокусировки внутри группы, следующее нажатие клавиши выводит пользователя из группы и перемещает фокус на соседний объект фокусировки за пределами группы.

Настройка перенаправления точки фокусировки

Во многих вариантах дизайна пользовательского интерфейса выбор элемента по умолчанию (например, первого дочернего элемента в порядке появления) не является наиболее логичным или удобным для пользователя.

Намерения и варианты использования

Рассмотрим диалоговое окно подтверждения с кнопкой «Отмена» слева и основной кнопкой «Подтвердить» справа. Когда пользователь переходит к панели кнопок из поля формы:

• Поведение по умолчанию : фокус остановится на кнопке «Отмена», поскольку это первая кнопка в порядке ее визуального отображения.
• Рекомендуемое поведение : Поскольку «Подтвердить» является основным рекомендуемым действием, возможно, вам потребуется, чтобы фокус сразу же переходил к группе кнопок, расположенной ранее в порядке фокусировки, при этом позволяя пользователю при необходимости нажать левую кнопку для выбора «Отмена».

Рисунок 2. Кнопки «Отмена» и «Подтверждение» с указанием целевой области ввода по умолчанию.

К другим распространенным вариантам использования относятся:

• Перемещение фокуса непосредственно на текущую выбранную вкладку при входе в 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 , автоматически выступают в роли групп фокусировки. Вам не нужно явно применять к ним модификатор focusGroup , чтобы установить обратные вызовы onEnter или onExit .

{% verbatim %} {% endverbatim %}