StickyHeader

Виджет StickyHeader представляет собой особый вид виджета, который позволяет «закреплять» верхнюю часть прокручиваемого списка, оставаясь видимым в верхней части области просмотра, пока остальное содержимое можно прокручивать. При прокрутке пользователей закрепленный заголовок остается неподвижным вверху, обеспечивая постоянное контекстное или навигационное подсказки.

Например, в приложениях с большим объемом данных, где пользователи прокручивают большие таблицы данных, закрепленные заголовки гарантируют, что заголовки столбцов всегда остаются видимыми, улучшая удобство использования и читаемость.

Виджет StickyHeader в действии

Виджет StickyHeader состоит из двух основных разделов: StickyHeader Header и StickyHeader Content.

• StickyHeader Header: Этот раздел содержит виджет, который остается неподвижным вверху при прокрутке. Обычно используется для отображения заголовков, названий или важной информации, которая должна оставаться видимой всегда.
• StickyHeader Content: Этот раздел содержит прокручиваемый виджет, такой как ListView или GridView, который содержит основное содержимое. Он позволяет пользователям прокручивать контент, а заголовок остается на месте.

Обратите внимание

Для работы виджета StickyHeader необходимо добавить его внутрь прокручиваемого виджета, такого как Column и ListView, и сделать их основным прокручиваемым виджетом. Примечание: Когда вы добавляете его внутрь Column, убедитесь, что делаете колонку прокручиваемой. Это обеспечивает желаемое поведение заголовка, который остается прикрепленным вверху при прокрутке контента.

Разделы StickyHeader

Добавление виджета StickyHeader

Давайте посмотрим, как вы можете использовать виджет StickyHeader в качестве замены AppBar, создав пример, содержащий строку поиска в качестве закрепленного заголовка.

Вот как это выглядит:

Использование строки поиска в качестве закрепленного виджета заголовка

Вот шаги для создания такого примера:

1. Сначала убедитесь, что у вас есть виджет Column на странице. Если его нет, добавьте. Также сделайте виджет Column прокручиваемым и основным.
2. Добавьте StickyHeader виджет из вкладки Base Elements.
3. Внутри раздела StickyHeader Header добавьте виджет, который вы хотите, чтобы он оставался вверху при прокрутке. В этом примере это строка поиска.
4. Внутри раздела StickyHeader Content добавьте виджеты ListView > Container, чтобы отобразить список пользователей.
5. Запросите и отобразите список пользователей в ListView.

Другой пример

При отображении длинного списка с категоризированными разделами, такими как список контактов с алфавитными разделами (A, B, C...), вы можете использовать виджет StickyHeader, чтобы сохранять заголовки разделов (например, буквы) видимыми при прокрутке списка контактов.

Цель состоит в том, чтобы генерировать виджеты StickyHeader, соответствующие каждой букве. Внутри каждого StickyHeader отображайте контакты, соответствующие начальной букве. Динамическое создание виджетов StickyHeader для каждой буквы позволяет предоставить структурированный вид с группированными контактами.

Вот как это выглядит после завершения:

Страница списков контактов с использованием виджета StickyHeader

Вот шаги для создания такого примера:

1. Подготовьте список букв от A до Z. Для этого вы можете использовать переменную AppState.

2. Подготовьте список контактов.

3. Добавьте виджеты ListView > StickyHeader.

   1. В ListView сгенерируйте динамические дочерние элементы из переменной, содержащей буквы.
   2. Внутри раздела StickyHeader добавьте виджет для отображения текущей буквы.

4. Теперь внутри раздела StickyHeader Content добавьте ListView с Container внутри для отображения списка соответствующих контактов.

   1. На этом ListView сгенерируйте динамические дочерние элементы из переменной, содержащей все контакты. При этом отфильтруйте список и извлеките только соответствующие контакты с помощью Выражения Code.
   2. Теперь вы можете отображать детали контакта, такие как имя, в пользовательском интерфейсе.