Как добавить липкие заголовки в свои списки в Jetpack Compose
Jetpack Compose поставляется со встроенными функциями, которые ускоряют разработку. Одной из таких функций являются липкие заголовки. Но прежде чем мы рассмотрим липкие заголовки, давайте разберемся со списками в Jetpack Compose.
LazyColumn и LazyRow
Отображать списки на экране Jetpack Compose можно с помощью LazyColumn или LazyRow, в зависимости от требуемой ориентации — это их единственное отличие. Судя по их именам, они ленивы. Это означает, что они загружают только те элементы, которые видны в данный момент, и перерабатывают их, как только они прокручиваются за пределы экрана. Этот подход очень эффективен, особенно при работе с большими списками неизвестной длины.
Оба они принимают одни и те же параметры, некоторые из них:
state: LazyListState— объект состояния, который будет использоваться для управления или наблюдения за состоянием спискаreverseLayout: Boolean— меняет направление прокрутки и макета на противоположное.horizontalArrangement: Arrangement.Horizontal— горизонтальное расположение дочерних элементов макета.verticalAlignment: Alignment.Vertical— вертикальное выравнивание, примененное к элементамuserScrollEnabled: Boolean— разрешена ли прокрутка с помощью жестов пользователя или специальных возможностей.content: LazyListScope.() -> Unit— блок, описывающий содержимое списка.
Как вы могли заметить, содержимое списка находится в файле LazyListScope. Он не принимает напрямую @Composable функций. Вместо этого вам нужно использовать другие функции, чтобы сформулировать содержание.
Содержимое списка можно описать с помощью таких методов, как LazyListScope.item для добавления одного элемента или LazyListScope.items для добавления нескольких элементов. Затем внутри них вы можете вызывать @Composable функций.
Вот простой пример их использования:
item и items также примите параметр key, который должен быть уникальным ключом, представляющим элемент. Использование одного и того же ключа для нескольких элементов списка не допускается. Тип ключа должен сохраняться через Bundle на Android. Если передается null, позиция в списке будет представлять ключ.
Пока все хорошо, теперь пришло время поговорить о том, почему мы здесь, и это Sticky Headers.
Список закрепленных заголовков
При создании списка бывают моменты, когда мы хотим сгруппировать элементы по определенным категориям или заголовкам. В таких случаях эти заголовки должны быть «липкими», то есть они должны продолжать отображаться, когда пользователь прокручивает различные элементы в определенной категории. В традиционных макетах XML для реализации этой функции потребовался бы значительный объем кода и усилия.
К счастью, Jetpack Compose значительно облегчает эту задачу. В рамках содержания нашего списка мы просто заменяем использование методов item или items на метод stickyHeader для заголовков. Эта гениальная функция делает за нас тяжелую работу, создавая липкий заголовок с минимальным кодом.
Как и методы item или items, stickyHeader также принимает ключ. Этот ключ служит той же цели, что и в методах item или items — он помогает компилятору идентифицировать элементы в списке. Этот механизм особенно удобен при работе с большими динамическими списками, поскольку обеспечивает эффективную рекомпозицию.
Итак, вот краткий пример, чтобы вы могли лучше понять это:
Довольно круто, верно? Это простой вызов функции, и вся тяжелая работа уже сделана.
Заключение
В заключение, Jetpack Compose продолжает революционизировать наш подход к разработке пользовательского интерфейса для Android, делая его более интуитивно понятным и менее громоздким. Функции LazyColumn и LazyRow упрощают отображение списков, независимо от их ориентации или размера. Кроме того, использование stickyHeader упрощает создание липких заголовков, задача, традиционно связанная со значительными усилиями по кодированию.
Jetpack Compose зарекомендовал себя как бесценный инструмент в наборе инструментов любого разработчика, беря на себя тяжелую работу и позволяя разработчикам сосредоточиться на создании уникальных и эффективных пользовательских интерфейсов. Независимо от того, являетесь ли вы ветераном разработки Android или только начинаете свой путь, нельзя отрицать простоту и эффективность, которые предлагает Jetpack Compose. Удачного кодирования!
Вы можете найти весь исходный код в моем репозитории GitHub.
Want to Connect? GitHub LinkedIn Twitter Portfolio website
Если вы хотите узнать больше о Jetpack Compose, ознакомьтесь с этими статьями:
