В Jetpack Compose Glimmer компонент GlimmerLazyColumn работает так же, как и LazyColumn в Compose, то есть создает и размещает только видимые элементы, чтобы обеспечить высокую производительность. Однако ленивые столбцы Glimmer предназначены для управления очками, где пользователь взаимодействует с помощью сенсорной панели, а не сенсорного экрана. Пользователь мобильного устройства может в любой момент нажать на любую точку экрана, а пользователь с дисплеем на очках – только на элемент, на котором сфокусировано внимание.
Фокус на поведении и дочерних объектах
В Glimmer ленивые столбцы автоматически обрабатывают навигацию на основе фокуса. В отличие от списков для мобильных устройств, где фокус и прокрутка часто разделены, ленивый столбец Glimmer координирует эти действия, перемещая фокус по дочерним элементам при прокрутке с помощью сенсорной панели. Сам список не может быть выбран, поэтому он управляет фокусом своих элементов и запрашивает его, чтобы пользователь мог взаимодействовать с ними при прокрутке.
Поскольку прямое сенсорное управление отсутствует, сделайте все дочерние элементы внутри ленивой колонки Glimmer доступными для фокуса. Когда фокус установлен на каком-либо элементе, также обеспечьте визуальный отклик, например активную границу или выделение. Пользователи по-прежнему смогут прокручивать нефокусируемые элементы, но не смогут взаимодействовать с ними. По возможности используйте встроенные компоненты, такие как ListItem или Card, поскольку они уже поддерживают фокус и предоставляют визуальную обратную связь для состояний фокуса.
Пример: ленивая загрузка столбцов Glimmer с несколькими элементами
В следующем коде показано, как использовать ленивый столбец Glimmer с методами DSL item и items для создания списка элементов:
@Composable fun GlimmerLazyColumnSample() { GlimmerLazyColumn { item { ListItem { Text("Header") } } items(count = 10) { index -> ListItem { Text("Item-$index") } } item { ListItem { Text("Footer") } } } }
Пример: ленивая загрузка столбцов Glimmer с местом для заголовка
Jetpack Compose Glimmer также предоставляет перегрузку GlimmerLazyColumn, которая содержит слот для заголовка. Неперемещаемое название, обычно TitleChip, остается вверху по центру, а контент списка прокручивается под ним.
В следующем примере кода создается ленивый столбец Glimmer с ячейкой заголовка:
@Composable fun GlimmerLazyColumnWithTitleChipSample() { val ingredientItems = listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon") GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) { items(ingredientItems) { text -> ListItem { Text(text) } } } }
Используйте состояние ленивого списка Glimmer для программных операций со списками
Чтобы управлять различными аспектами состояния списка, например положением прокрутки, с помощью свойств firstVisibleItemIndex и firstVisibleItemScrollOffset, используйте GlimmerLazyListState.
Вы можете поднять это состояние, используя rememberGlimmerLazyListState, чтобы программно прокручивать контент с помощью scrollToItem и animateScrollToItem.