В Jetpack Compose Glimmer, GlimmerLazyColumn работает аналогично Compose LazyColumn , компонуя и размещая только видимые элементы для поддержания высокой производительности. Однако ленивые колонки 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 .