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